/* Seite „Einrichten“: links die nummerierte Anleitung, rechts die Bühne mit den nachgezeichneten Systemfenstern.
   Alles drumherum folgt dem Styleguide und nimmt nur Werte aus tokens.css. Nur INNERHALB der Systemfenster stehen
   Farben und Schriften nahe am Original (macOS-Grau, Windows-Blau, Systemschrift des Rechners), damit man die
   Fenster wiedererkennt. Alle Klassen tragen den Vorsatz „einr-“. Der goldene Ring zeigt, wohin man klickt.

   EIN Bild: Über 760 px Fensterbreite ist die Anordnung auf 1280 px Breite entworfen und bricht nie um;
   einrichten.js bringt sie per zoom auf die verfügbare Breite, seite.js danach auf die Höhe des Fensters.
   Die Bühne ist immer 760 × 340 entworfen. Bis 760 px: gestapelt. */

.einr-bild { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: var(--r2) var(--r5); align-items: start; width: 100%; }
.einr-fest .einr-bild { width: 1280px; }
.einr-bild > * { min-width: 0; }

/* ── Kopf: Überschrift links, Umschalter Mac / Windows rechts ── */
.einr-kopf { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--r3); }
.einr-kopf .blockzeile { margin: 0 0 var(--halb); }
.einr-einleitung { margin-top: var(--halb); color: var(--tinte-gedaempft); font-size: var(--betont-groesse); line-height: var(--betont-zeile); }
.einr-systeme { flex: none; display: flex; gap: 6px; }
.einr:not(.einr-bereit) .einr-systeme, .einr:not(.einr-bereit) .einr-karte { display: none; }
.einr-systeme button, .einr-schritt { font: inherit; cursor: pointer; }
.einr-systeme button { display: inline-flex; align-items: center; gap: var(--r1); min-height: 36px; padding: 0 var(--r3);
  border-radius: var(--rund-voll); border: 1px solid var(--linie); background: var(--karte); color: var(--tinte);
  font-size: var(--grund-groesse); font-weight: var(--gewicht-halbfett);
  transition: background var(--uebergang), color var(--uebergang), border-color var(--uebergang); }
.einr-systeme button svg { width: 17px; height: 17px; }
.einr-systeme button:hover { background: var(--farbe-navy-100); }
.einr-systeme button[aria-pressed="true"] { background: var(--kopf); border-color: var(--kopf); color: var(--tinte-hell); }
.einr-systeme button:focus-visible, .einr-schritt:focus-visible { border-radius: var(--rund-voll); }

/* ── Links: die Anleitung. Der aktive Schritt: Navy-Nummer, Goldrand, Erklärung aufgeklappt ── */
.einr-liste ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--halb); }
.einr-liste[hidden] { display: none; }
.einr-liste h2 { display: none; }
/* Ohne Skript: beide Anleitungen untereinander, mit Überschrift und allen Erklärungen */
.einr:not(.einr-bereit) .einr-liste h2 { display: block; margin: var(--r2) 0 var(--r1); }
.einr-liste li { border: 1.5px solid transparent; border-radius: var(--rund-gross); padding: 0 var(--r2) 0 0;
  transition: border-color var(--uebergang), background var(--uebergang); }
.einr-schritt { display: flex; align-items: center; gap: 12px; width: 100%; padding: var(--r1) 0 var(--r1) 12px; border: 0; background: none;
  color: var(--tinte); text-align: left; }
.einr-nr { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--farbe-navy-100); color: var(--kopf); font-size: var(--klein-groesse); font-weight: var(--gewicht-fett);
  transition: background var(--uebergang), color var(--uebergang); }
.einr-schritt b { font-size: var(--betont-groesse); line-height: var(--betont-zeile); font-weight: var(--gewicht-halbfett); }
.einr-liste li p { margin: 0; padding: 0 0 12px 52px; color: var(--tinte-gedaempft); }
.einr-bereit .einr-liste li:not(.einr-aktiv) p { display: none; }
.einr-bereit .einr-liste li:not(.einr-aktiv):hover { background: var(--flaeche-ruhig); }
.einr-liste li.einr-aktiv { border-color: var(--akzent); background: var(--karte); box-shadow: var(--schatten-karte); }
.einr-liste li.einr-aktiv .einr-nr { background: var(--kopf); color: var(--tinte-hell); }

/* ── Rechts: die Karte mit Bühne und Bedienung ── */
.einr-karte { display: flex; flex-direction: column; gap: 12px; padding: 19px; }
.einr-platz { width: 100%; overflow: hidden; border-radius: var(--rund-gross); }
.einr-fuss { display: flex; align-items: center; gap: var(--r1); }
.einr-stand { flex: 1; min-width: 0; color: var(--tinte-gedaempft); font-weight: var(--gewicht-halbfett); }
.einr-ansage { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Die Bühne: unser nachtblauer Bildschirm, darauf die Systemfenster */
.einr-buehne { position: relative; width: 760px; height: 340px; overflow: hidden; border-radius: var(--rund-gross);
  background: linear-gradient(160deg, var(--farbe-navy-800), var(--farbe-navy-900)); color: #1d1d1f; user-select: none; }
.einr-szene { position: absolute; inset: 0; }
.einr-szene[hidden] { display: none; }
.einr-mac { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; }
.einr-win { font-family: "Segoe UI Variable Text", "Segoe UI", Tahoma, Arial, sans-serif; font-size: 12px; line-height: 16px; color: #1b1b1b; }
.einr-zeiger { position: absolute; left: 0; top: 0; width: 15px; height: auto; opacity: 0; pointer-events: none; transform-origin: 0 0;
  fill: #fff; stroke: #111; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.4)); z-index: 9; }
/* Der goldene Ring zeigt das Ziel des Handgriffs */
.einr-ring, .einr-szene:not(.einr-s1) .einr-ring1, .einr-s1:not(.einr-s2) .einr-ring2, .einr-s3 .einr-ring3,
.einr-s1:not(.einr-s3) .einr-nichts { outline: 2px solid var(--akzent); outline-offset: 3px; }
.einr-app { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 18px; background: linear-gradient(180deg, #fff, #eef1f5);
  box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.12); }
.einr-app img { width: 78%; height: 78%; object-fit: contain; }
.einr-f-blau { background: #2f7cf6; } .einr-f-rot { background: #f2453d; } .einr-f-rosa { background: #f0447c; }
.einr-f-grau { background: #8e8e93; } .einr-f-schwarz { background: #2c2c2e; }
.einr-platzhalter { display: block; width: 56px; height: 56px; border-radius: 13px; opacity: .8; }
.einr-platzhalter.klein { width: 22px; height: 22px; border-radius: 6px; }

/* ── macOS ── */
.einr-mleiste { position: absolute; left: 0; right: 0; top: 0; height: 20px; display: flex; align-items: center; gap: 14px; padding: 0 12px;
  background: rgba(255,255,255,.16); color: #fff; font-size: 11px; }
.einr-mleiste b { font-weight: 700; } .einr-mleiste em { margin-left: auto; font-style: normal; }
.einr-ampel { display: inline-flex; gap: 6px; } .einr-ampel i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18); }
.einr-ampel i:nth-child(2) { background: #febc2e; } .einr-ampel i:nth-child(3) { background: #28c840; }
.einr-mfenster { position: absolute; overflow: hidden; border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.45); }
.einr-mtitel { position: relative; height: 28px; display: flex; align-items: center; padding: 0 10px; background: #ececec; border-bottom: 1px solid #d4d4d4;
  font-weight: 700; color: #3c3c3e; }
.einr-mtitel > span:not(.einr-ampel) { position: absolute; left: 0; right: 0; text-align: center; }
/* Schritt 1: Laufwerksfenster, danach der Ordner „Programme“ */
.einr-laufwerk { left: 150px; top: 36px; width: 460px; height: 276px; }
.einr-mleib { position: relative; height: 248px; background: #fff; }
.einr-laufwerk figure { position: absolute; margin: 0; width: 80px; text-align: center; }
.einr-laufwerk figcaption { margin-top: 6px; font-size: 12px; white-space: nowrap; display: flex; justify-content: center; }
.einr-zieh { left: 70px; top: 56px; z-index: 2; transition: opacity .25s; }
.einr-zieh .einr-app { transition: transform .25s; }
.einr-s2 .einr-zieh { opacity: 0; } .einr-s2 .einr-zieh .einr-app { transform: scale(.35); }
.einr-pfeil { position: absolute; left: 180px; top: 84px; width: 100px; height: 24px; fill: none; stroke: #9a9aa0; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.einr-ordnerbild { left: 310px; top: 56px; border-radius: 12px; }
.einr-ordner { position: relative; display: block; width: 80px; height: 80px; transition: transform .2s; }
.einr-ordner::before { content: ""; position: absolute; left: 4px; top: 12px; width: 34px; height: 14px; border-radius: 5px 8px 0 0; background: #3f9bea; }
.einr-ordner i { position: absolute; left: 4px; right: 4px; top: 20px; bottom: 8px; border-radius: 6px; background: linear-gradient(180deg, #6cc0fb, #379cf0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.25); }
.einr-s1:not(.einr-s2) .einr-ordner, .einr-s2:not(.einr-s3) .einr-ordner { transform: scale(1.08); }
.einr-t2, .einr-ansicht2 { display: none; }
.einr-s3 .einr-t1, .einr-s3 .einr-ansicht1 { display: none; }
.einr-s3 .einr-t2 { display: block; }
.einr-s3 .einr-ansicht2 { display: grid; grid-template-columns: repeat(4, 56px); column-gap: 52px; row-gap: 40px; padding: 24px 40px; align-content: start; }
.einr-laufwerk .einr-neu { position: static; width: 56px; border-radius: 10px; }
.einr-neu .einr-app { width: 56px; height: 56px; border-radius: 13px; }
.einr-neu figcaption { font-size: 11px; margin-top: 4px; }
.einr-s4 .einr-neu { background: rgba(0,0,0,.08); }
.einr-s4 .einr-neu figcaption { background: #2f7cf6; color: #fff; border-radius: 4px; }
/* Schritt 2: die Frage nach dem Mikrofon */
.einr-mfrage { position: absolute; left: 250px; top: 62px; width: 260px; height: 200px; padding: 20px 16px 0; border-radius: 14px; text-align: center;
  background: #ececec; box-shadow: 0 0 0 .5px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.5); transition: opacity .3s, transform .3s; }
.einr-mfrage .einr-app { width: 56px; height: 56px; border-radius: 13px; margin: 0 auto 12px; }
.einr-mfrage strong { display: block; font-size: 13px; line-height: 17px; font-weight: 700; }
.einr-mknoepfe { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; gap: 8px; }
.einr-mknoepfe span { flex: 1; height: 28px; display: grid; place-items: center; border-radius: 6px; background: #fff; font-size: 13px;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.12); }
.einr-s1 .einr-mknoepfe .einr-ring { background: #d6d6d8; }
.einr-s2 .einr-mfrage { opacity: 0; transform: scale(.94); }
/* Schritte 3 und 4: Systemeinstellungen */
.einr-meinst { left: 60px; top: 30px; width: 640px; height: 296px; display: flex; background: #f5f5f5; }
.einr-mseite { flex: none; width: 196px; padding: 12px 10px; background: #e6e6e6; border-right: 1px solid #d0d0d0; }
.einr-mseite .einr-ampel { margin: 0 0 12px 4px; }
.einr-msuche { height: 22px; margin-bottom: 8px; padding: 0 8px; display: flex; align-items: center; border-radius: 6px; background: rgba(0,0,0,.07); color: #8a8a8e; }
.einr-mpunkt { height: 22px; display: flex; align-items: center; gap: 7px; padding: 0 6px; border-radius: 5px; white-space: nowrap; }
.einr-mpunkt i { width: 15px; height: 15px; border-radius: 4px; flex: none; }
.einr-mpunkt.einr-gewaehlt { background: #2f7cf6; color: #fff; }
.einr-minhalt { position: relative; flex: 1; min-width: 0; padding: 0 20px; }
.einr-mkopf { height: 44px; display: flex; align-items: center; gap: 4px; }
.einr-mkopf svg { width: 16px; height: 16px; fill: none; stroke: #8a8a8e; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.einr-mkopf b { margin-left: 8px; font-size: 15px; font-weight: 700; }
.einr-minhalt p { height: 36px; margin: 0 0 16px; color: #6e6e73; }
.einr-mkasten { border-radius: 8px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.14); }
.einr-mkasten > div { height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; font-size: 13px; }
.einr-mkasten > div + div { border-top: 1px solid #e6e6e6; }
.einr-mkasten .einr-app { width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 .5px rgba(0,0,0,.25); }
.einr-mschalter { position: relative; margin-left: auto; flex: none; width: 38px; height: 22px; border-radius: 11px; background: #d9d9dc; transition: background .2s; }
.einr-mschalter::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .2s; }
.einr-mschalter.an, .einr-s1 .einr-mschalter.einr-schaltet { background: #2f7cf6; }
.einr-mschalter.an::after, .einr-s1 .einr-mschalter.einr-schaltet::after { transform: translateX(16px); }
.einr-mplus { display: inline-flex; margin-top: 8px; border-radius: 5px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.14); color: #6e6e73; }
.einr-mplus span { width: 24px; height: 20px; display: grid; place-items: center; font-size: 14px; } .einr-mplus span + span { border-left: 1px solid #e6e6e6; }
.einr-regler { margin: 8px 0 12px; }
.einr-mkasten.einr-regler > div { height: 64px; gap: 24px; }
.einr-regler span { flex: 1; display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.einr-schieber { position: relative; display: block; height: 4px; border-radius: 2px; background: #d9d9dc; }
.einr-schieber u { position: absolute; top: -6px; width: 8px; height: 16px; margin-left: -4px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.3); }
.einr-globuszeile { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.einr-globus { width: 14px; height: 14px; }
.einr-mwahl { margin-left: auto; flex: none; width: 196px; height: 24px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 3px 0 8px;
  border-radius: 6px; color: #3c3c3e; white-space: nowrap; }
.einr-mwahl svg { width: 16px; height: 18px; padding: 2px 3px; border-radius: 5px; background: #2f7cf6; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.einr-w2, .einr-s3 .einr-w1 { display: none; } .einr-s3 .einr-w2 { display: inline; }
.einr-mmenue { position: absolute; left: 172px; top: 108px; width: 262px; font-size: 11px; padding: 4px; border-radius: 8px; background: rgba(246,246,246,.98);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.25), 0 10px 24px rgba(0,0,0,.3); font-size: 13px; opacity: 0; transition: opacity .12s; }
.einr-s1:not(.einr-s3) .einr-mmenue { opacity: 1; }
.einr-mmenue span { display: flex; align-items: center; height: 24px; padding: 0 8px 0 24px; border-radius: 5px; position: relative; white-space: nowrap; }
.einr-haken::before { content: ""; position: absolute; left: 9px; top: 6px; width: 4px; height: 9px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(40deg); }
.einr-s2 .einr-nichts { background: #2f7cf6; color: #fff; }
.einr-s1:not(.einr-s3) .einr-mwahl { outline: 0; }
.einr-s1:not(.einr-s3) .einr-nichts { outline-offset: 1px; }
.einr-s1:not(.einr-s2) .einr-haken { background: #2f7cf6; color: #fff; }
/* Schritt 5: Notiz */
.einr-notiz { left: 120px; top: 32px; width: 520px; height: 232px; }
.einr-nleib { display: flex; height: 204px; }
.einr-nliste { flex: none; width: 150px; padding: 10px; background: #f3f2ef; border-right: 1px solid #dedcd6; }
.einr-nliste b, .einr-nliste em { display: block; font-style: normal; } .einr-nliste b { padding: 6px 8px 0; border-radius: 6px 6px 0 0; background: #fbe08a; }
.einr-nliste em { padding: 0 8px 6px; border-radius: 0 0 6px 6px; background: #fbe08a; color: #6b5a1e; font-size: 11px; }
.einr-ntext { flex: 1; padding: 16px 18px; font-size: 17px; line-height: 24px; font-weight: 700; }

/* ── Windows ── */
.einr-wleiste { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: rgba(238,243,249,.92); font-size: 11px; color: #1b1b1b; }
.einr-wleiste i { width: 19px; height: 19px; border-radius: 5px; background: #9db3cc; display: grid; place-items: center; }
.einr-wleiste i:nth-child(3) { background: #e7b55a; } .einr-wleiste i:nth-child(4) { background: #5b8fd6; } .einr-wleiste i:nth-child(5) { background: #6fb58b; }
.einr-wleiste .einr-weigen { background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.2); } .einr-weigen img { width: 15px; height: 15px; }
.einr-wsuche { width: 120px; height: 20px; padding: 0 10px; display: flex; align-items: center; border-radius: 10px; background: #fff; color: #5f5f5f; box-shadow: 0 0 0 .5px rgba(0,0,0,.15); }
.einr-wleiste em { position: absolute; right: 12px; font-style: normal; }
.einr-wfenster { position: absolute; overflow: hidden; border-radius: 8px; background: #f3f3f3; box-shadow: 0 0 0 .5px rgba(0,0,0,.4), 0 16px 36px rgba(0,0,0,.45); }
.einr-wtitel { height: 30px; display: flex; align-items: flex-end; padding-left: 8px; background: #e8edf3; }
.einr-wname { align-self: center; padding-left: 6px; }
.einr-wreiter { height: 25px; min-width: 150px; padding: 0 12px; display: flex; align-items: center; gap: 7px; border-radius: 7px 7px 0 0; background: #f9f9f9; }
.einr-wknoepfe { margin-left: auto; align-self: stretch; display: flex; }
.einr-wknoepfe svg { width: 40px; height: 30px; padding: 10px 15px; fill: none; stroke: #1b1b1b; stroke-width: 1; }
.einr-ordnerklein { width: 15px; height: 12px; border-radius: 2px; background: linear-gradient(180deg, #f8d775, #e9b530); }
/* Schritt 1: Ordner „Downloads“ */
.einr-explorer { left: 70px; top: 22px; width: 620px; height: 272px; }
.einr-wband { height: 34px; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: #f9f9f9; border-bottom: 1px solid #e5e5e5; }
.einr-wband i { width: 15px; height: 15px; border-radius: 3px; background: #c9d3de; }
.einr-wpfad { height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #f9f9f9; }
.einr-wpfad svg { width: 15px; height: 15px; fill: none; stroke: #6b6b6b; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.einr-wpfad span { flex: 1; height: 22px; padding: 0 10px; display: flex; align-items: center; border-radius: 4px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.18); }
.einr-wpfad em { width: 150px; height: 22px; padding: 0 10px; display: flex; align-items: center; border-radius: 4px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.18); color: #767676; font-style: normal; }
.einr-wleib { display: flex; }
.einr-explorer .einr-wleib { height: 176px; background: #fff; }
.einr-wnav { flex: none; width: 150px; padding: 6px; border-right: 1px solid #e5e5e5; }
.einr-wnav span { display: flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 4px; }
.einr-wnav .einr-gewaehlt { background: #e5f1fb; }
.einr-wliste { flex: 1; min-width: 0; }
.einr-wspalten, .einr-wdatei { display: grid; grid-template-columns: minmax(0, 1fr) 120px 100px; align-items: center; padding: 0 12px; }
.einr-wspalten { height: 24px; color: #5f5f5f; border-bottom: 1px solid #ededed; }
.einr-wgruppe { height: 22px; display: flex; align-items: center; padding: 0 12px; color: #2b5ea7; }
.einr-wdatei { position: relative; height: 26px; margin: 0 4px; padding: 0 8px 0 32px; border-radius: 4px; outline-offset: -1px !important; }
.einr-wdatei .einr-app { position: absolute; left: 8px; top: 4px; width: 18px; height: 18px; border-radius: 4px; box-shadow: 0 0 0 .5px rgba(0,0,0,.25); }
.einr-wdatei span:nth-child(n+3) { color: #5f5f5f; }
.einr-s1 .einr-wdatei { background: #cce8ff; box-shadow: inset 0 0 0 1px #99d1ff; }
/* Schritt 2: der blaue Kasten */
.einr-blau { position: absolute; left: 120px; top: 20px; width: 520px; height: 280px; padding: 24px; background: #0063b1; color: #fff;
  box-shadow: 0 16px 36px rgba(0,0,0,.45); transition: opacity .3s; font-size: 12.5px; line-height: 18px; }
.einr-blau strong { display: block; font-size: 20px; line-height: 26px; font-weight: 400; white-space: nowrap; }
.einr-blau p { margin: 14px 0 0; }
.einr-bzu { position: absolute; right: 0; top: 0; width: 40px; height: 30px; display: grid; place-items: center; }
.einr-bzu svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 1.1; }
.einr-mehr { position: absolute; left: 24px; top: 136px; }
.einr-herausgeber { position: absolute; left: 24px; top: 136px; line-height: 20px; display: none; padding-right: 10px; }
.einr-herausgeber span { display: inline-block; width: 96px; }
.einr-s1 .einr-mehr { display: none; } .einr-s1 .einr-herausgeber { display: block; }
.einr-bknoepfe { position: absolute; right: 24px; bottom: 20px; display: flex; gap: 8px; }
.einr-bknoepfe span { width: 130px; height: 30px; display: grid; place-items: center; background: #e1e1e1; color: #000; }
.einr-bknoepfe .einr-trotzdem { width: 150px; display: none; }
.einr-s1 .einr-trotzdem { display: grid; }
.einr-s3 .einr-trotzdem { background: #bdbdbd; outline: 0 !important; }
.einr-szene:not(.einr-s2) .einr-trotzdem { outline: 0; }
.einr-s2:not(.einr-s3) .einr-trotzdem { outline: 2px solid var(--akzent); outline-offset: 3px; }
.einr-s4 .einr-blau { opacity: 0; }
/* Schritt 3: Einstellungen › Datenschutz und Sicherheit › Mikrofon */
.einr-weinst { left: 60px; top: 18px; width: 640px; height: 286px; }
.einr-weinst .einr-wtitel { background: #f3f3f3; align-items: center; }
.einr-weinst .einr-wleib { height: 256px; }
.einr-wseite { flex: none; width: 200px; padding: 4px 8px; }
.einr-wfeld { height: 24px; margin-bottom: 6px; padding: 0 10px; display: flex; align-items: center; border-radius: 4px; background: #fff; color: #767676;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.15), inset 0 -1px 0 #8a8a8a; }
.einr-wpunkt { position: relative; height: 26px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border-radius: 4px; white-space: nowrap; }
.einr-wpunkt i { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.einr-wf0 { background: #4a90d9; } .einr-wf1 { background: #3aa0a8; } .einr-wf2 { background: #d98b3a; } .einr-wf3 { background: #7a7fd1; }
.einr-wpunkt.einr-gewaehlt { background: #e9e9e9; }
.einr-wpunkt.einr-gewaehlt::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: #005fb8; }
.einr-winhalt { flex: 1; min-width: 0; padding: 12px 24px 0; }
.einr-winhalt h4 { height: 28px; margin: 0 0 14px; font-size: 17px; line-height: 28px; font-weight: 400; color: #5f5f5f; white-space: nowrap; }
.einr-winhalt h4 b { font-weight: 600; color: #1b1b1b; }
.einr-wkarte { height: 52px; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 5px; background: #fbfbfb;
  box-shadow: 0 0 0 1px #e5e5e5; font-size: 13px; }
.einr-wkarte span { flex: 1; } .einr-wkarte em { font-style: normal; }
.einr-wschalter { position: relative; flex: none; width: 40px; height: 20px; border-radius: 10px; box-shadow: inset 0 0 0 1px #5f5f5f; transition: background .2s, box-shadow .2s; }
.einr-wschalter::after { content: ""; position: absolute; left: 4px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #5f5f5f; transition: transform .2s, background .2s; }
.einr-wschalter.an, .einr-s1 .einr-wschalter.einr-schaltet { background: #005fb8; box-shadow: none; }
.einr-wschalter.an::after, .einr-s1 .einr-wschalter.einr-schaltet::after { transform: translateX(20px); background: #fff; }
.einr-ein, .einr-s1 .einr-aus { display: none; } .einr-s1 .einr-ein { display: inline; }
/* Schritt 4: Editor */
.einr-editor { left: 120px; top: 18px; width: 520px; height: 224px; background: #fff; }
.einr-wmenue { height: 26px; display: flex; align-items: center; gap: 16px; padding: 0 12px; background: #f9f9f9; border-bottom: 1px solid #e5e5e5; }
.einr-etext { height: 144px; padding: 8px 10px; font-family: Consolas, "Cascadia Mono", "Courier New", monospace; font-size: 15px; line-height: 20px; }
.einr-wstatus { height: 24px; display: flex; align-items: center; gap: 28px; padding: 0 12px; background: #f9f9f9; border-top: 1px solid #e5e5e5; color: #5f5f5f; font-size: 11px; }

/* ── Die Probe: Taste, Sprechzeile, unsere Wolke (wie im Film der Startseite) ── */
.einr-cursor { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: text-bottom; background: #1d1d1f; opacity: 0; }
.einr-s1 .einr-cursor { opacity: 1; animation: einr-blinken 1s steps(1) infinite; }
@keyframes einr-blinken { 50% { opacity: 0; } }
.einr-probe { position: absolute; left: 120px; right: 120px; bottom: 18px; height: 40px; display: flex; align-items: center; gap: 12px;
  font-family: var(--schrift); font-size: var(--grund-groesse); line-height: var(--grund-zeile); color: var(--tinte); }
.einr-win .einr-probe { bottom: 44px; }
.einr-taste { flex: none; min-width: 52px; height: 32px; padding: 0 10px; display: grid; place-items: center; border-radius: var(--rund-klein);
  background: var(--karte); border: 1px solid var(--akzent); border-bottom-width: 3px; box-shadow: 0 0 0 2px var(--akzent);
  color: var(--akzent-tinte); font-size: var(--klein-groesse); font-weight: var(--gewicht-fett); transition: transform .08s, background .12s, color .12s; }
.einr-s2:not(.einr-s3) .einr-taste { transform: translateY(2px); background: var(--akzent); color: var(--farbe-navy-900); border-bottom-width: 1px; }
.einr-blase { position: relative; padding: 5px 14px; border-radius: var(--rund-gross); background: var(--flaeche-ruhig); white-space: nowrap; opacity: 0; transition: opacity .2s; }
.einr-blase::after { content: ""; position: absolute; left: -4px; top: calc(50% - 5px); width: 10px; height: 10px; background: var(--flaeche-ruhig); transform: rotate(45deg); }
.einr-s2:not(.einr-s3) .einr-blase { opacity: 1; }
.einr-worte:empty::before { content: "\00a0"; }
.einr-wolke { margin-left: auto; display: flex; align-items: center; gap: var(--halb); opacity: 0; transition: opacity .25s; }
.einr-s2:not(.einr-s4) .einr-wolke { opacity: 1; }
.einr-wolke img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--akzent) 55%, transparent)); }
.einr-s2:not(.einr-s3) .einr-wolke img { animation: einr-atmen 2.6s ease-in-out infinite; }
.einr-s3 .einr-wolke img { animation: einr-drehen 2.4s linear infinite; }
@keyframes einr-atmen { 0%, 100% { transform: scale(.92); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes einr-drehen { to { transform: rotate(360deg); } }
.einr-wolke em { font-style: normal; background: var(--farbe-navy-900); color: var(--tinte-hell); border: 1px solid var(--farbe-navy-300); border-radius: var(--rund-voll);
  padding: 3px 12px; white-space: nowrap; font-size: var(--klein-groesse); line-height: var(--klein-zeile); font-weight: var(--gewicht-halbfett); }
.einr-haelt * { animation-play-state: paused !important; }

/* ── Handy bis 760 px: gestapelt; die Bühne füllt die Karte per zoom ── */
@media (max-width: 760px) {
  .einr-bild { grid-template-columns: minmax(0, 1fr); gap: var(--r2); }
  .einr-kopf { flex-direction: column; align-items: flex-start; gap: var(--r2); }
  /* Die Bühne steht über der Anleitung und bleibt beim Rollen oben stehen, damit man den gewählten Schritt sieht. */
  .einr-karte { padding: 12px; order: 2; position: sticky; top: 64px; z-index: 5; box-shadow: var(--schatten-schwebend); }
  .einr-kopf { order: 1; } .einr-links { order: 3; }
}

/* ── Wenig Bewegung gewünscht: kein Selbstlauf; die Schritte zeigen Standbilder ── */
@media (prefers-reduced-motion: reduce) {
  .einr-spielen { display: none; }
  .einr-cursor, .einr-wolke img { animation: none !important; }
  .einr-buehne *, .einr-liste li, .einr-nr { transition: none !important; }
}