/* DIE ANLEITUNG AM BILDSCHIRM - Julias Auftrag "Automatische Tutorials und
   Guided Tours", Stufe 1 (23.10.2026, Prototyp fuer `E-Learning zuweisen`).

   DIESES BLATT ERBT NICHTS, UND DAS IST SEIN GANZER ZWECK.

   Die Maske /360/fortbildungen/zuweisen laeuft ueber `_arbeitsraum` und damit
   ueber `H.seite(..., breit=True)` OHNE `system="claude"` - also in der alten
   360-Schale, die `spido-system.css` nicht laedt. Ein Bauteil, das aus dem
   Designsystem erbt (`.dialog`, `.btn`, `var(--…)`), stuende dort
   unformatiert da. Dieselbe Wurzel wie bei Julias "Handbuchdokument
   anpassen", beim Abschlussknopf der fuenf Boegen und bei den 42
   Aufrufstellen (von_alex/papier/261022-julia-und-alex-die-alte-schale-drei-tueren.md).

   DARUM: eigener Namensraum `sfuehr-`, jede Farbe und jedes Mass hier
   ausgeschrieben, KEIN `var(--…)` ohne eigenen Wert, KEINE Wiederverwendung
   von `.dialog-overlay`. Wer das Blatt an das Designsystem haengt, macht
   diesen Auftrag von der Wurzel abhaengig, die er gerade umgeht.

   WAS ES NICHT TUT: es setzt keine Regel an ein Element, das es nicht selbst
   gebaut hat. Die einzige Ausnahme ist `.sfuehr-ziel` - die Klasse, die das
   Skript dem hervorgehobenen Element ANHAENGT und nach dem Schritt wieder
   abnimmt. Sie setzt `outline` und `box-shadow`, nicht `border` oder
   `padding`: beides wuerde die Maske beim Hervorheben verschieben, und eine
   Anleitung, die das Ziel wegruecken laesst, zeigt auf die falsche Stelle. */

.sfuehr-knopf {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: .5rem;
  border: 1px solid #c9ccd4;
  border-radius: 50%;
  background: #ffffff;
  color: #3f4350;
  font: 600 0.95rem/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
  vertical-align: middle;
}
.sfuehr-knopf:hover { background: #f2f4f8; color: #1d2029; }
.sfuehr-knopf:focus-visible { outline: 2px solid #2f6feb; outline-offset: 2px; }

/* DER SCHLEIER LIEGT UEBER ALLEM UND FAENGT NICHTS AB. `pointer-events: none`
   ist kein Schoenheitsgriff: die Tour zeigt auf Felder, die der Mensch
   WAEHREND der Tour bedienen soll (Schritt 1 bis 3). Ein Schleier, der
   Klicks schluckt, macht genau das unmoeglich, was gemessen werden soll -
   die echte Nutzeraktion. */
/* DER TEXT GIBT NACH, NICHT DIE KNOEPFE - UND NICHT DER ZAEHLER.
   GEMESSEN AM 24.10.2026 (Lauf 531, AK-BLASEENG, sechs Fensterhoehen): diese
   Blase fuehrte WEDER `max-height` NOCH `overflow`, ihre Hoehe kam also allein
   aus ihrem Text. Bei 320x200 (400 % Zoom - die Stufe, die WCAG 1.4.10
   verlangt) war sie 290 x 333 px und stand bei o=8: 141 px LAGEN UNTER DER
   KANTE, und dort liegt die Knopfreihe. `elementFromPoint` auf die eigene
   Mitte von "Weiter" und "Abbrechen" nannte NIEMAND - die Knoepfe waren da
   und nicht zu druecken. Der Zaehler war zu sehen: sie liest "Schritt 1 von 4"
   und kommt mit der Maus weder vor noch heraus.
   UND ES WIRD SCHLIMMER, JE SCHMALER DAS FENSTER IST, nicht nur je niedriger:
   bei 480 px Breite ist die Blase 273 px hoch, bei 320 px sind es 333 px -
   derselbe Text bricht auf mehr Zeilen um. Darum greift der Fall FRUEHER, als
   die Hoehe allein vermuten laesst.
   DIE REGEL IST DIE DER DIALOGE (0-JULIA-DIALOGE-ROLLEN, b885f96d): KEIN
   DIALOG VERSTECKT SEINEN EIGENEN KNOPF. Sie sitzt dort auf `.dialog` und hat
   diesen Namensraum nie gedeckt; Lauf 530 hat sie fuer die VORSCHAU
   eingesetzt (`.sfuehr-v-kasten`), und die Blase ist die andere Haelfte
   desselben Namensraumes. Sie steht hier also ein drittes Mal und nicht als
   Ausnahme.
   WARUM DER TEXT DER RICHTIGE ORT IST: in der Vorschau gibt das BILD nach
   (`object-fit: contain` - es wird kleiner und bleibt vollstaendig). Hier gibt
   es kein Bild; was nachgeben kann, ohne eine Auskunft zu nehmen, ist der
   Schritttext - er wird rollbar. Der Zaehler sagt, WO man ist, die Knopfreihe
   ist der WEG; beides bleibt stehen (`flex: 0 0 auto`). */
.sfuehr-blase {
  position: fixed;
  z-index: 2147483002;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-width: 24rem;
  min-width: 15rem;
  max-height: calc(100dvh - 1rem);
  padding: .85rem 1rem 1rem;
  border: 1px solid #d6d9e0;
  border-radius: 10px;
  background: #ffffff;
  color: #1d2029;
  font: 400 .9rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 10px 28px rgba(16, 20, 32, .22);
  pointer-events: auto;
}
.sfuehr-zaehler {
  flex: 0 0 auto;
  margin: 0 0 .35rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #6b7080;
}
.sfuehr-text {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0 0 .85rem;
}
.sfuehr-nurzeigen {
  margin: 0 0 .85rem;
  padding: .45rem .6rem;
  border-left: 3px solid #d79a1a;
  background: #fdf6e6;
  font-size: .84rem;
  color: #5a4409;
}
.sfuehr-reihe {
  flex: 0 0 auto;
  display: flex;
  gap: .5rem;
  align-items: center;
}
.sfuehr-reihe button {
  all: unset;
  box-sizing: border-box;
  padding: .4rem .8rem;
  border: 1px solid #c9ccd4;
  border-radius: 6px;
  background: #ffffff;
  color: #1d2029;
  font: 500 .86rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
}
/* EIN VERBORGENER KNOPF MUSS HIER AUSDRUECKLICH VERSCHWINDEN, und das ist
   kein Schmuck: `all: unset` eine Regel darueber setzt `display` auf seinen
   Anfangswert `inline` zurueck - eine AUTORENREGEL, die die eingebaute Regel
   des Browsers (`[hidden] { display: none }`) schlaegt. Ohne diese Zeile
   stuenden „Weiter" und „Zurueck" in der Anleitung des Assistenten weiter da,
   obwohl das Skript sie auf `hidden` gesetzt hat - und zwar lautlos.
   GEMESSEN WIRD DESHALB DAS BAUTEIL UND NICHT DIE ABSICHT. */
.sfuehr-reihe button[hidden] { display: none; }
.sfuehr-reihe button:hover { background: #f2f4f8; }
.sfuehr-reihe button:focus-visible { outline: 2px solid #2f6feb; outline-offset: 2px; }
.sfuehr-reihe button[disabled] { opacity: .45; cursor: default; }
.sfuehr-weiter {
  border-color: #2f6feb !important;
  background: #2f6feb !important;
  color: #ffffff !important;
}
.sfuehr-weiter:hover { background: #2559c8 !important; }
.sfuehr-ab { margin-left: auto; color: #6b7080 !important; border-color: transparent !important; }

@media (prefers-reduced-motion: no-preference) {
  .sfuehr-blase { transition: top .18s ease, left .18s ease; }
}

/* ===========================================================================
   DIE VORSCHAU - ansehen, ohne zu klicken (Julia, 24.10.2026)

   SIE IST DAS GEGENTEIL DES SCHLEIERS DARUEBER, und zwar mit Absicht. Der
   Schleier der ANLEITUNG laesst Klicks durch (`pointer-events: none`), weil
   der Mensch die Maske waehrend der Tour bedienen SOLL. Der Schleier der
   VORSCHAU faengt alles ab und deckt die Anwendung zu: Julia hat ausdruecklich
   gesagt, sie moechte "nicht im Echtsystem klicken muessen". Was man nicht
   sieht und nicht erreicht, kann man nicht versehentlich druecken.

   ZWEI SCHLEIER MIT ZWEI AUFGABEN SIND KEIN DOPPEL, SONDERN DER UNTERSCHIED
   ZWISCHEN DEN ZWEI WEGEN HINTER DEMSELBEN "?". Wer sie zusammenlegt, nimmt
   einem von beiden seinen Sinn.

   ERBT NICHTS - dieselbe Begruendung wie oben im Blatt: die Maske laeuft in
   der alten 360-Schale ohne `spido-system.css`. Jede Farbe steht hier.
   =========================================================================== */
.sfuehr-v-schleier {
  position: fixed;
  inset: 0;
  z-index: 2147483100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(16, 20, 32, .72);
  pointer-events: auto;
  overflow: auto;
  font: 400 .9rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* DAS BILD GIBT NACH, NICHT DIE KNOEPFE - UND NICHT DER ZAEHLER.
   GEMESSEN AM 24.10.2026 (Lauf 530, AK-VORSCHAUGLAS, drei Fensterhoehen):
   die Hoehe dieses Kastens kam aus dem BILD und nicht aus dem Fenster. Der
   Rahmen traegt `aspect-ratio: 1280/800`, bei 1088 px Breite sind das 680 px,
   und mit Kopf, Zeilen und Rand stand der Inhalt bei 853 px (Schritt 1-3)
   bzw. 897 px (Schritt 4, die produktive Zeile kommt dazu) - UNABHAENGIG
   davon, wie hoch das Fenster ist. Was darueber hinausging, lag hinter der
   Kante:
     1280x900  Schritt 4: 37 px darueber - ein Klick auf "Zurueck" traf den
               SCHLEIER, und der Schleier SCHLIESST. Julia kommt bis Schritt 4
               und ihr Weg zurueck raeumt die Vorschau ab.
     1280x800  Schritt 1-3: 93 px darueber, Schritt 4: 137 px. Dazu holt
               `fuehrung.js` zum Schluss den Fokus auf "Weiter" - das ROLLT
               den Kasten (scrollTop 93), und damit stand DER GANZE KOPF
               OBERHALB DES FENSTERRANDES: "Schließen" bei y=-57 bis -28, der
               Zaehler ("Schritt 1 von 4") bei y=-52 bis -33. Die Vorschau war
               mit der Maus nicht zuzumachen und sagte nicht, wo man ist -
               heraus kam man nur mit Escape oder einem Treffer auf den
               Schleier.
     1280x720  173 bzw. 217 px darueber, derselbe Kopf bei y=-137 bzw. -132 -
               derselbe Fall, nur weiter draussen.
   DIE REGEL IST DIE DER DIALOGE (0-JULIA-DIALOGE-ROLLEN, b885f96d): KEIN
   DIALOG DARF SEINEN EIGENEN KNOPF VERSTECKEN. Sie sitzt dort auf `.dialog`;
   dieser Kasten fuehrt seinen eigenen Namensraum (`sfuehr-`) und war von ihr
   nie gedeckt - also steht sie hier ein zweites Mal und nicht als Ausnahme.
   WARUM DER RAHMEN DER RICHTIGE ORT IST: das Bild hat `object-fit: contain`.
   Ein kleinerer Rahmen zeigt es kleiner und VOLLSTAENDIG - nichts wird
   beschnitten und nichts verzerrt. Ein weggerollter Zaehler dagegen nimmt
   Julia die Auskunft, bei welchem Schritt sie steht. */
.sfuehr-v-kasten {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(68rem, 100%);
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  padding: 1rem 1.15rem 1.15rem;
  border-radius: 12px;
  background: #ffffff;
  color: #1d2029;
  box-shadow: 0 18px 48px rgba(16, 20, 32, .4);
}

.sfuehr-v-kopf {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .7rem;
}
/* HIER STAND `.sfuehr-v-zaehler` - DER ZWEITE ZAEHLER, und er ist am
   25.10.2026 gefallen. Der Zaehler sitzt jetzt IN der Blase
   (`.sfuehr-zaehler`), weil die Erklaerung am Objekt steht und die Nummer
   dazugehoert. Zwei Zaehler fuer einen Ablauf sind die Falle, die in diesem
   Namensraum schon einmal bezahlt wurde - wer hier wieder einen einsetzt,
   hat zwei Wahrheiten ueber dieselbe Stelle. */
.sfuehr-v-zu {
  all: unset;
  box-sizing: border-box;
  margin-left: auto;
  padding: .35rem .7rem;
  border: 1px solid #c9ccd4;
  border-radius: 6px;
  background: #ffffff;
  color: #3f4350;
  font: 500 .84rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
}
.sfuehr-v-zu:hover { background: #f2f4f8; }
.sfuehr-v-zu:focus-visible { outline: 2px solid #2f6feb; outline-offset: 2px; }

/* DER RAHMEN HAELT SEINE HOEHE, AUCH WAEHREND DAS NAECHSTE BILD LAEDT. Ohne
   `aspect-ratio` springt der Kasten bei jedem Weiterklicken zusammen und
   wieder auf - und die Knoepfe darunter wandern dem Finger weg. Das Mass ist
   das der Aufzeichnung (1280 x 800). */
/* `flex: 0 1 auto` MIT `min-height: 0` IST DAS GANZE NACHGEBEN: der Rahmen
   nimmt seine Hoehe weiter aus dem Seitenverhaeltnis, DARF ABER SCHRUMPFEN,
   wenn die Spalte sonst ueber die Kante liefe. Ohne `min-height: 0` schrumpft
   ein Flex-Kind nicht unter seine Inhaltshoehe - die Zeile sieht wie
   Zierwerk aus und ist der wirksame Teil. */
/* `position: relative` IST DER ANKER DER BLASE UND KEIN SCHMUCK. Seit die
   Erklaerung AM OBJEKT steht (Julias (13)(c)), liegt die Blase IM Rahmen und
   rechnet ihren Ort in dessen Bildpunkten. Ohne diese Zeile faende sie als
   naechsten aufgespannten Vorfahren den Schleier - also das ganze Fenster -
   und stuende bei jedem Schritt um den Rand des Kastens daneben. */
.sfuehr-v-rahmen {
  position: relative;
  aspect-ratio: 1280 / 800;
  width: 100%;
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #d6d9e0;
  border-radius: 8px;
  background: #f2f4f8;
}
.sfuehr-v-bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ------------------------------------------- Die Blase IM Bild, und der Ring
   Julias (13)(c): "die Erklaerung steht am Objekt, nicht darunter."

   ES IST DIESELBE BLASE WIE DIE DER GESTRIGEN TOUR (ihr Wort) - alles
   Aussehen steht oben bei `.sfuehr-blase` und wird hier NICHT wiederholt.
   Diese zwei Regeln aendern allein die VERANKERUNG: statt im Fenster
   (`fixed`) haengt sie im Bild (`absolute`). Wer hier Farben, Schrift oder
   Raender einsetzt, hat die zweite Lesart desselben Aussehens gebaut. */
.sfuehr-blase--imbild {
  position: absolute;
  /* IM BILD GILT DIE HOEHE DES BILDES UND NICHT DIE DES FENSTERS. Oben steht
     `max-height: calc(100dvh - 1rem)`; im Rahmen waere das wirkungslos gross
     und die Blase koennte ueber die Bildkante hinauswachsen, wo ihre
     Knopfreihe dann abgeschnitten ist (`overflow: hidden` am Rahmen). */
  max-height: calc(100% - .5rem);
  max-width: min(24rem, calc(100% - .5rem));
}

/* DER RUECKFALL, AUSDRUECKLICH UND BENANNT: hat ein Bild keinen gemessenen
   Rahmen (oder ist es noch nicht geladen), steht die Blase UNTER dem Bild -
   also so, wie die Vorschau sich bis zum 25.10.2026 verhalten hat. Das ist
   sichtbar schlechter und nicht kaputt; gezaehlt werden die fehlenden Rahmen
   von AK-FUEHRUNGVORSCHAU. */
.sfuehr-blase--unten {
  position: static;
  max-width: none;
  max-height: none;
  margin: .6rem 0 0;
  border-radius: 0;
  border: 0;
  border-top: 1px solid #d6d9e0;
  box-shadow: none;
  padding: .85rem 0 0;
}

/* DER RING UM DAS ZIEL - die andere Haelfte von "am Objekt". In der gestrigen
   Tour lag `.sfuehr-ziel` am echten Element; hier ist das Bauteil ein
   Bildpunkt, also liegt der Ring als eigener Kasten darueber. DIESELBEN MASZE
   UND DIESELBE FARBE wie damals (3 px, #2f6feb, Versatz 3 px), damit Julia
   denselben Zeigefinger sieht.
   `pointer-events: none`: er liegt UEBER dem Bild, und ein Klick auf das Bild
   darf nicht am Ring haengenbleiben. */
.sfuehr-v-ring {
  position: absolute;
  box-sizing: border-box;
  outline: 3px solid #2f6feb;
  outline-offset: 3px;
  border-radius: 4px;
  pointer-events: none;
}
.sfuehr-v-ring[hidden] { display: none; }

.sfuehr-v-beispiel {
  margin: .6rem 0 0;
  color: #6b7080;
  font-size: .78rem;
}
/* VERALTETE BILDER SIND EIN MANGEL UND SEHEN AUS WIE EINER - dieselbe Farbe
   wie die Wache oben. Sie sagt es, statt ein falsches Bild still zu zeigen. */
.sfuehr-v-alt {
  margin: .6rem 0 0;
  padding: .45rem .6rem;
  border-left: 3px solid #c0392b;
  background: #fdf3f2;
  font-size: .84rem;
  font-weight: 600;
  color: #8e2b20;
}
.sfuehr-v-alt[hidden] { display: none; }