/* Einfuehrung. Besitzer: Frontend Developer. Kaskadenposition 4 von 6.

   Start-Gegenueberstellung, Rollenvorschau, Probeanruf, Schrittleiste
   (Spec §3, Aufgabe 6+7). Legt ausschliesslich .ein-… Klassen an —
   Komposition mit bestehenden Bausteinen (.marke, .hinweis, .btn,
   .abschnitt-nr) ist erlaubt, ein neuer Name ohne das Praefix nicht.
   stil-schnitt.test.js prueft das.

   Layout ohne @media: alle @media(min-width|max-width) sind ausschliesslich
   buehne.css vorbehalten (Spec §5.2) — hier reflowt darum flex-wrap mit
   min-width auf den Kindern statt eines festen 560px-Umbruchs. Das Ergebnis
   ist funktional gleichwertig (keine Zeile laeuft horizontal aus, auf
   schmalen Breiten steht alles untereinander), der Umbruchpunkt ist nur
   nicht auf den Pixel exakt an 560px gebunden. */

/* --- Gegenueberstellung (#start) und Rollenvorschau (#warteraum) --------
   Beide teilen sich .ein-seite/--geraet/--handbuch: dieselbe
   Zwei-Sprachen-Gegenueberstellung, einmal mit Zitat+Abschnitt, einmal mit
   Rollenbeschreibung. */
.ein-gegenueber, .ein-rollenvorschau{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:.8rem;margin:1.1rem 0;
}
.ein-rollenvorschau{padding:.9rem 1rem;border-radius:var(--r-s);
  background:rgba(255,255,255,.03);border:1px solid var(--line);}
.ein-rollenvorschau > .marke, .ein-rollenvorschau > .hinweis{flex-basis:100%;}
.ein-rollenvorschau > .hinweis{margin:.1rem 0 0;}

.ein-seite{flex:1 1 13rem;min-width:13rem;padding:.85rem 1rem;
  border-radius:var(--r-s);background:var(--surface-2);
  border:1px solid var(--line-2);}
.ein-seite--geraet{border-color:color-mix(in srgb, var(--geraet) 26%, var(--line-3));
  background:color-mix(in srgb, var(--geraet) 6%, var(--surface-2));}
.ein-seite--handbuch{border-color:color-mix(in srgb, var(--handbuch) 26%, var(--line-3));
  background:color-mix(in srgb, var(--handbuch) 6%, var(--surface-2));}
.ein-seite--geraet .marke{color:var(--geraet);}
.ein-seite--handbuch .marke{color:var(--handbuch);}
.ein-seite p{margin:.5rem 0 0;font-size:var(--tx-m);color:var(--text);}
/* Das Zitat aus dem Handbuch ist Mono, wie jede Handbuch-Kennzahl im
   Projekt (Spec §2.2) — der Kontrast zum Fliesstext links ist Absicht. */
.ein-seite--handbuch p{font-family:var(--mono);font-size:var(--tx-s);color:var(--text-2);}
.ein-seite--handbuch p b{color:var(--handbuch);}
.ein-seite b{display:block;font-size:var(--tx-s);margin-bottom:.2rem;}
.ein-seite span{font-size:var(--tx-xs);color:var(--text-2);}

/* Die Naht: ein kleiner, richtungsloser Verbindungspunkt statt einer Linie,
   die "waagerecht nebeneinander, senkrecht untereinander" haette umschalten
   muessen — genau das braucht einen Breakpoint, und Breakpoints sind
   ausschliesslich buehne.css vorbehalten (Spec §5.2). Ein Punkt liest sich
   in beiden Anordnungen richtig. */
.ein-naht{flex:0 0 auto;align-self:center;width:.55rem;height:.55rem;
  border-radius:50%;margin:0 .1rem;
  background:linear-gradient(135deg, var(--geraet), var(--handbuch));}

/* --- Probeanruf (#warteraum) ---------------------------------------------
   Feste Beispieldaten, wiederholbar, keine Punkte (Spec §3 Schicht 2). */
.ein-probe{margin:1.1rem 0;padding:.9rem 1rem;border-radius:var(--r-s);
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:.5rem;}
.ein-probe p{margin:0;color:var(--text-2);}
.ein-probe-option{display:flex;align-items:baseline;gap:.7rem;text-align:left;
  width:100%;padding:.6rem .9rem;border-radius:var(--r-btn);cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);
  font:inherit;font-size:var(--tx-s);}
.ein-probe-option:hover{border-color:var(--line-3);}
.ein-probe-antwort{margin:0;min-height:1.2em;font-size:var(--tx-s);}
.ein-probe-antwort--richtig{color:var(--ok);}
.ein-probe-antwort--falsch{color:var(--schlecht);}

/* --- Schrittleiste (?einfuehrung, Spec §3 Schicht 3) ---------------------
   Schmal, kein Modal — sie darf den Blick auf die echte Ansicht dahinter
   nie verdecken. data-schritt ist der Haken fuer bewegung.css
   (Aufgabe 7-Schnittstelle), hier nur die ruhige Grundform.

   Finish-Gate-Blocker B3: Als position:fixed am UNTEREN Rand lag sie exakt
   auf der ebenfalls unten fixierten Chateingabe (bis zu 258x30px
   Ueberlappung auf 390x844 — ausgerechnet auf dem Feld, mit dem Schritt 1
   befolgt werden soll). Jetzt steht sie im normalen Fluss direkt hinter
   .leiste (stoerungsannahme.html) und ist sticky knapp darunter statt frei
   ueber der Seite: ein Element im Fluss kann nichts, das WEITER UNTEN im
   selben Fluss steht — wie die Chateingabe — je ueberlappen, unabhaengig
   von Viewport oder Zeilenzahl. */
.ein-schritt{position:sticky;top:3.4rem;z-index:40;margin:.9rem 1rem 0;
  background:var(--surface-2);border:1px solid var(--rolle-kante, var(--line-2));
  border-radius:var(--r-s);padding:.8rem 1.1rem;
  box-shadow:var(--edge),var(--sh-2);
  display:flex;flex-direction:column;gap:.3rem;}
.ein-schritt p{margin:0;font-size:var(--tx-m);color:var(--text);}
.ein-schritt .hinweis{margin:.15rem 0 0;}

/* --- Abschlusskarte -------------------------------------------------------
   Anders als die Schrittleiste ist das hier ein echter Endpunkt (wie die
   Auswertung am Ende einer echten Schicht) — deshalb bewusst zentriert und
   deckend, nicht schmal am Rand. */
.ein-abschluss{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:90;max-width:26rem;width:calc(100% - 2rem);
  padding:2rem 1.75rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--edge),var(--sh-2);}