/* ============================================================
   Erklaerszenen der Problem-Sektionen
   ------------------------------------------------------------
   Jede Szene erzaehlt dieselbe Dramaturgie in zwei Akten:
   Akt A zeigt den Alltag heute, Akt B dieselbe Situation mit
   Konfigurator. Den Taktgeber stellt js/scenes.js ueber die
   Klassen .act-a und .act-b; die Bewegung selbst liegt komplett
   in CSS-Transitions.

   Ohne JavaScript oder bei prefers-reduced-motion fehlt .anim:
   Dann steht Akt A vollstaendig da und Akt B haengt als ruhige
   Zusammenfassung darunter — nichts bleibt unsichtbar.
   ============================================================ */

.scene { overflow: hidden; }

.scene .sc-stage {
  position: relative;
  min-height: var(--h, 300px);
}

/* Ohne .anim laufen beide Akte untereinander im normalen Fluss. */
.scene .sc-b { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

/* Mit .anim liegen sie uebereinander und wechseln sich ab. */
.scene.anim .sc-stage { display: grid; align-items: start; }
.scene.anim .sc-stage > * { grid-area: 1 / 1; }
.scene.anim .sc-b { margin: 0; padding: 0; border: 0; }

.scene.anim .sc-a,
.scene.anim .sc-b { transition: opacity .5s ease; }
.scene.anim .sc-b { opacity: 0; pointer-events: none; }
.scene.anim.act-b .sc-a { opacity: 0; }
.scene.anim.act-b .sc-b { opacity: 1; }

/* Kopfzeile: die Bildunterschrift wechselt mit dem Akt. */
.sc-cap .sc-cap-b { display: none; }
.scene.anim .sc-cap { display: grid; }
.scene.anim .sc-cap > span { grid-area: 1 / 1; transition: opacity .4s ease; }
.scene.anim .sc-cap .sc-cap-b { display: block; opacity: 0; color: var(--accent-2); }
.scene.anim.act-b .sc-cap .sc-cap-a { opacity: 0; }
.scene.anim.act-b .sc-cap .sc-cap-b { opacity: 1; }

/* Grundbewegung: alles mit .sc-in faehrt gestaffelt ein.
   Die Reihenfolge steuert --i, den Abstand --stag. */
.scene.anim .sc-in {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,.8,.3,1);
  transition-delay: calc(var(--i, 0) * var(--stag, .34s));
}
.scene.anim.act-a .sc-a .sc-in,
.scene.anim.act-b .sc-a .sc-in,
.scene.anim.act-b .sc-b .sc-in { opacity: 1; transform: none; }

/* Beim Ausblenden eines Akts soll nichts mehr nachlaufen. */
.scene.anim.act-b .sc-a .sc-in { transition-delay: 0s; }

/* ── Gemeinsame Bausteine ────────────────────────────────── */

/* Fazitzeile am Fuss eines Akts */
.sc-verdict {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--muted-3);
}
.sc-verdict::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  flex: none;
}
.sc-verdict.bad::before  { background: #d9604b; box-shadow: 0 0 0 4px rgba(217,96,75,.16); }
.sc-verdict.good::before { background: #3fca8b; box-shadow: 0 0 0 4px rgba(63,202,139,.16); }
.sc-verdict.bad  strong { color: #ef8b78; font-weight: 600; }
.sc-verdict.good strong { color: #6fe0a6; font-weight: 600; }

/* Kleine Marke, die im Bild haengt (Urlaub, Auftrag, Absage …) */
.sc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-hard);
  background: rgba(255,255,255,.05);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-3);
  white-space: nowrap;
}
.sc-tag.bad  { border-color: rgba(226,112,92,.5);  background: rgba(226,112,92,.14);  color: #ef8b78; }
.sc-tag.good { border-color: rgba(74,222,155,.45); background: rgba(74,222,155,.12); color: #6fe0a6; }
.sc-tag.blue { border-color: rgba(125,146,255,.5); background: rgba(58,85,231,.18);  color: var(--accent-3); }

/* Zaehler, den js/scenes.js hochlaufen laesst */
.sc-num { font-variant-numeric: tabular-nums; }


/* ── 01 Rueckfragen: Nachrichtenverlauf → vollstaendige Anfrage ── */

.sc-msgs { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }

.sc-msg {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: baseline;
  gap: 12px;
  max-width: 92%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  font-size: 13.5px;
  line-height: 1.45;
  text-wrap: pretty;
}
.sc-msg b {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--dim);
}
/* Eingehend links, deine Rueckfragen rechts — das Hin und Her
   soll man an der Form erkennen, nicht erst am Text. */
.sc-msg.them {
  justify-self: start;
  background: rgba(255,255,255,.05);
  border-bottom-left-radius: 4px;
  color: var(--bright);
}
.sc-msg.you {
  justify-self: end;
  background: rgba(226,112,92,.1);
  border-color: rgba(226,112,92,.32);
  border-bottom-right-radius: 4px;
  color: #f0b4a6;
}
.sc-msg.you b { color: #d98b78; }

.scene.anim .sc-msg.them { transform: translate(-12px, 6px); }
.scene.anim .sc-msg.you  { transform: translate(12px, 6px); }
.scene.anim.act-a .sc-a .sc-msg,
.scene.anim.act-b .sc-a .sc-msg { transform: none; }

.sc-sub {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted-2);
  text-wrap: pretty;
}

.sc-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sc-fields li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid rgba(74,222,155,.28);
  border-radius: 10px;
  background: rgba(74,222,155,.08);
  font-size: 12.5px;
  color: var(--bright);
}
.sc-fields li::before {
  content: "";
  width: 13px; height: 13px;
  flex: none;
  border-radius: 50%;
  background: rgba(74,222,155,.9);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.4 6.4 11.3 12.5 5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 13px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.4 6.4 11.3 12.5 5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 13px no-repeat;
}


/* ── 02 Kalkulation: Engstelle Mensch → offener Kanal ─────── */

.sc-svg { display: block; width: 100%; height: auto; }

.sc-pipe {
  fill: rgba(255,255,255,.035);
  stroke: rgba(255,255,255,.14);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.sc-pipe.open { fill: rgba(58,85,231,.07); stroke: rgba(125,146,255,.3); }

/* Die Person steht buchstaeblich in der Engstelle. */
.sc-person { fill: #d9604b; }
.sc-sys { fill: rgba(58,85,231,.2); stroke: var(--accent-2); stroke-width: 1.5; }
.sc-sys-mark line { stroke: var(--accent-3); stroke-width: 2.5; stroke-linecap: round; }

.sc-dot { fill: rgba(255,255,255,.34); transform: translate(var(--tx, 0px), var(--ty, 0px)); }
.sc-dot.jam { fill: #d9604b; }
.sc-dot.go  { fill: var(--accent-2); }

.scene.anim .sc-dot {
  opacity: 0;
  transform: translate(0, 0);
  transition: transform 1.35s cubic-bezier(.5,0,.2,1), opacity .35s ease;
}
.scene.anim.act-a .sc-a .sc-dot,
.scene.anim.act-b .sc-a .sc-dot,
.scene.anim.act-b .sc-b .sc-dot {
  opacity: 1;
  transform: translate(var(--tx, 0px), var(--ty, 0px));
  transition-delay: var(--d, 0s);
}

.sc-legs {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.sc-leg {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--dim);
}
.sc-leg.mid { justify-self: center; text-align: center; color: #ef8b78; }
.sc-leg.mid.blue { color: var(--accent-3); }
.sc-leg.end { justify-self: end; }


/* ── 03 Vergleichsangebote: fuenf Kacheln bleiben dunkel ──── */

.sc-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sc-tile {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  aspect-ratio: 1 / .82;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,.04);
  text-align: center;
}
.sc-tile b {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--dim);
}
.sc-tile span { font-size: 11px; line-height: 1.2; color: var(--muted-2); }
.sc-tile.won   { border-color: rgba(74,222,155,.4);  background: rgba(74,222,155,.1); }
.sc-tile.won span { color: #6fe0a6; }
.sc-tile.lost  { opacity: .55; }
.sc-tile.void  {
  border-color: rgba(226,112,92,.28);
  background: #0b0c12;
  box-shadow: inset 0 0 22px rgba(0,0,0,.9);
}
.sc-tile.void span { font-size: 17px; color: #b4573f; }
.sc-tile.void b { color: #5c4038; }
.sc-tile.quick { border-color: rgba(125,146,255,.42); background: rgba(58,85,231,.16); }
.sc-tile.quick span { color: var(--accent-3); }

/* Die Kacheln drehen sich auf — man sieht das Ergebnis eintreffen. */
.scene.anim .sc-tile { transform: rotateX(-72deg); transform-origin: 50% 0; }
.scene.anim.act-a .sc-a .sc-tile,
.scene.anim.act-b .sc-a .sc-tile,
.scene.anim.act-b .sc-b .sc-tile { transform: none; }

.sc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--muted-2);
}
.sc-key { display: flex; align-items: center; gap: 7px; }
.sc-key::before { content: ""; width: 9px; height: 9px; border-radius: 3px; flex: none; }
.sc-key.won::before   { background: #4ade9b; }
.sc-key.lost::before  { background: rgba(255,255,255,.24); }
.sc-key.void::before  { background: #0b0c12; border: 1px solid rgba(226,112,92,.5); }
.sc-key.quick::before { background: var(--accent); }


/* ── 04 Vorqualifizierung: der Kalender fuellt sich falsch ── */

.sc-slots { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.sc-slots li { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 12px; }
.sc-slots b {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--dim);
}
.sc-slot {
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  font-size: 12.5px;
  color: var(--muted-2);
}
.sc-slot.bad {
  border-color: rgba(226,112,92,.3);
  background: rgba(226,112,92,.1);
  color: #f0b4a6;
}
.sc-slot.good {
  border-color: rgba(74,222,155,.42);
  background: rgba(74,222,155,.12);
  color: #a8ecc9;
}
.sc-slot.good em {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  margin-right: 7px;
  border-radius: 50%;
  background: rgba(74,222,155,.9);
  color: #06301f;
  font-family: var(--mono);
  font-size: 10.5px;
  font-style: normal;
  vertical-align: -3px;
}
.sc-slot.free { border-style: dashed; color: var(--dim); }

.sc-wait {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(74,222,155,.35);
  border-radius: 11px;
  background: rgba(74,222,155,.09);
}
.sc-wait-no {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(74,222,155,.9);
  color: #06301f;
  font-family: var(--mono);
  font-size: 12px;
}
.sc-wait-txt { font-size: 12.5px; color: #a8ecc9; }

/* Der Stempel faellt zum Schluss auf die Karte — das ist der Moment,
   in dem der Ernsthafte woanders unterschreibt. */
.sc-stamp {
  position: absolute;
  right: 12px;
  top: 50%;
  padding: 5px 11px;
  border: 2px solid rgba(226,112,92,.8);
  border-radius: 6px;
  background: rgba(20,10,10,.9);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ef8b78;
  transform: translateY(-50%) rotate(-7deg);
}
.scene.anim .sc-stamp { opacity: 0; transform: translateY(-50%) rotate(-7deg) scale(1.6); transition: opacity .3s ease, transform .3s cubic-bezier(.3,1.4,.5,1); }
.scene.anim.act-a .sc-a .sc-stamp,
.scene.anim.act-b .sc-a .sc-stamp { opacity: 1; transform: translateY(-50%) rotate(-7deg) scale(1); transition-delay: 3.6s; }
.scene.anim .sc-wait { transition: border-color .4s ease, background .4s ease; }
.scene.anim .sc-wait-no,
.scene.anim .sc-wait-txt { transition: background .4s ease, color .4s ease; }
/* Sobald der Stempel liegt, ist die Karte kalt. */
.scene.anim.act-a .sc-a .sc-wait,
.scene.anim.act-b .sc-a .sc-wait {
  border-color: var(--line);
  background: rgba(255,255,255,.03);
  transition-delay: 3.6s;
}
.scene.anim.act-a .sc-a .sc-wait-no,
.scene.anim.act-b .sc-a .sc-wait-no { background: rgba(255,255,255,.22); color: var(--bg); transition-delay: 3.6s; }
.scene.anim.act-a .sc-a .sc-wait-txt,
.scene.anim.act-b .sc-a .sc-wait-txt { color: var(--muted-4); transition-delay: 3.6s; }

.sc-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 14px; }
.sc-filter-txt { font-size: 12.5px; color: var(--muted-2); }


/* ── 05 Tempo: alle starten gleichzeitig, einer ist zuerst da ── */

.sc-lanes { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.sc-lane {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 5px 12px;
}
.sc-lane-n { font-size: 13px; color: var(--muted-2); }
.sc-lane > b {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--bright);
  white-space: nowrap;
}
.sc-track {
  grid-column: 1 / -1;
  position: relative;
  display: block;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
}
.sc-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: 999px;
  background: rgba(255,255,255,.28);
}
.sc-track i.bad { background: linear-gradient(90deg, #e2705c, #c9553f); }
.sc-track i.go  { background: linear-gradient(90deg, #4ade9b, #2fae78); }

/* Die Ziel-Marke steht am Ende des jeweiligen Balkens. */
.sc-flag {
  position: absolute;
  top: 50%;
  left: var(--w);
  transform: translate(9px, -50%);
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-style: normal;
  white-space: nowrap;
}
.sc-flag.good { background: rgba(9,26,19,.94); border: 1px solid rgba(74,222,155,.5); color: #6fe0a6; }
.sc-flag.late { background: rgba(12,14,20,.94); border: 1px solid var(--line-hard); color: var(--dim); }
/* Am rechten Rand kippt die Marke nach innen, sonst laeuft sie aus dem Bild. */
.sc-lane[style*="--w:100%"] .sc-flag { left: auto; right: 0; transform: translate(0, -50%); }

.scene.anim .sc-track i { width: 0; transition: width var(--run, 1s) linear; }
.scene.anim .sc-flag { opacity: 0; transform: translate(9px, -50%) scale(.7); transition: opacity .3s ease, transform .3s cubic-bezier(.3,1.4,.5,1); }
.scene.anim .sc-lane[style*="--w:100%"] .sc-flag { transform: translate(0, -50%) scale(.7); }
.scene.anim.act-a .sc-a .sc-track i,
.scene.anim.act-b .sc-a .sc-track i,
.scene.anim.act-b .sc-b .sc-track i { width: var(--w); }
.scene.anim.act-a .sc-a .sc-flag,
.scene.anim.act-b .sc-a .sc-flag,
.scene.anim.act-b .sc-b .sc-flag {
  opacity: 1;
  transform: translate(9px, -50%) scale(1);
  transition-delay: var(--run, 1s);
}
.scene.anim.act-a .sc-a .sc-lane[style*="--w:100%"] .sc-flag,
.scene.anim.act-b .sc-a .sc-lane[style*="--w:100%"] .sc-flag { transform: translate(0, -50%) scale(1); }


/* ── 06 Wachstum: Treppe gegen flache Linie ───────────────── */

.sc-axis line { stroke: rgba(255,255,255,.1); stroke-width: 1; }
.sc-step {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.sc-step.bad   { stroke: #d9604b; }
.sc-step.go    { stroke: #4ade9b; }
.sc-step.ghost { stroke: rgba(226,112,92,.25); stroke-dasharray: 4 6; }

/* Die Linien zeichnen sich, statt einfach dazustehen. */
.scene.anim .sc-step:not(.ghost) {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 2.4s cubic-bezier(.4,0,.3,1);
}
.scene.anim.act-a .sc-a .sc-step:not(.ghost),
.scene.anim.act-b .sc-a .sc-step:not(.ghost),
.scene.anim.act-b .sc-b .sc-step:not(.ghost) { stroke-dashoffset: 0; }

.sc-pin {
  font-family: var(--mono);
  font-size: 11px;
  fill: #ef8b78;
}
.sc-pin.go { fill: #6fe0a6; }
.sc-xlab text {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  fill: var(--dim);
}
.sc-xlab text:nth-child(3) { text-anchor: end; }


/* ── 07 Blindflug: ueber und unter der Wasserlinie ────────── */

.sc-surface {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(125,146,255,.35);
}
.sc-surface-t {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}
.sc-surface-n {
  grid-row: 1 / 3;
  grid-column: 2;
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 500;
  color: var(--text);
}
.sc-pips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.sc-pips li { width: 11px; height: 14px; border-radius: 2px; background: rgba(255,255,255,.3); }

.sc-deep {
  position: relative;
  min-height: 150px;
  margin-top: -1px;
  padding: 22px 18px;
  border-radius: 0 0 12px 12px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(58,85,231,.14), transparent 70%),
    #06070c;
  overflow: hidden;
}
/* Das Punktfeld steht fuer die 214 Starts. Unbeleuchtet ist es fast
   unsichtbar — genau das ist die Aussage des Abschnitts. */
.sc-deep::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(125,146,255,.9) 1.7px, transparent 2px);
  background-size: 17px 15px;
  opacity: .05;
  transition: opacity .9s ease;
}
.sc-deep.lit::before { opacity: .5; }
.sc-deep-q {
  position: absolute;
  left: 50%; top: 26px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 44px;
  color: rgba(255,255,255,.13);
}
.sc-deep-t {
  position: absolute;
  left: 18px; right: 18px; bottom: 18px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-4);
  text-align: center;
  text-wrap: pretty;
}

.sc-drops { position: relative; display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.sc-drops li {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 7px 11px;
  border-radius: 8px;
  background: rgba(9,11,19,.9);
  backdrop-filter: blur(2px);
  font-size: 12.5px;
  color: var(--muted-2);
}
.sc-drops b {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-3);
  text-align: right;
}
.sc-drops li:nth-child(2) b,
.sc-drops li:nth-child(3) b { color: #ef8b78; }
.sc-drops li:last-child b { color: #6fe0a6; }


/* ── 08 Mobil: eine Frage pro Bildschirm ──────────────────── */

.sc-phone .sc-stage { min-height: var(--h); }

/* Ohne Bewegung zeigt das Telefon nur den ersten Schritt: Zwei Fragen
   uebereinander auf einem Bildschirm wuerden genau das Gegenteil dessen
   behaupten, was der Abschnitt sagt. */
.sc-phone .sc-b { display: none; }
.scene.anim.sc-phone .sc-b { display: block; margin: 0; padding: 0; border: 0; }

.sc-phone .mock-opt { position: relative; }

/* Die Auswahl entsteht erst durch das Tippen, nicht schon davor. */
.scene.anim.sc-phone .mock-opt.is-on {
  border: 1px solid var(--mk-line);
  background: var(--mk-bg);
  transition: border-color .3s ease, background .3s ease;
}
.scene.anim.sc-phone .mock-opt.is-on .mock-dot { opacity: 0; transition: opacity .3s ease; }
.scene.anim.sc-phone.act-a .sc-a .mock-opt.is-on,
.scene.anim.sc-phone.act-b .sc-b .mock-opt.is-on {
  border-color: var(--mk-acc);
  background: var(--mk-acc-soft);
  transition-delay: 1.1s;
}
.scene.anim.sc-phone.act-a .sc-a .mock-opt.is-on .mock-dot,
.scene.anim.sc-phone.act-b .sc-b .mock-opt.is-on .mock-dot { opacity: 1; transition-delay: 1.1s; }

/* Tippfleck: zeigt, dass hier getippt und nicht ausgefuellt wird. */
.sc-tap {
  position: absolute;
  left: 14px;
  top: 50%;
  margin-top: -14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(125,146,255,.9);
  background: rgba(58,85,231,.3);
  opacity: 0;
  pointer-events: none;
}
.scene.anim.act-a .sc-a .sc-tap,
.scene.anim.act-b .sc-b .sc-tap { animation: sc-tap 1.6s ease-out .45s 1 both; }
@keyframes sc-tap {
  0%   { opacity: 0; transform: scale(1.9); }
  25%  { opacity: 1; transform: scale(1); }
  60%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.4); }
}



/* ── Schmale Bildschirme ─────────────────────────────────── */

@media (max-width: 620px) {
  /* Die Beschriftung des Kanals braucht eine eigene Zeile, sonst
     quetschen sich drei Angaben nebeneinander. */
  .sc-legs { grid-template-columns: auto auto; }
  .sc-leg.mid { grid-column: 1 / -1; grid-row: 1; justify-self: start; text-align: left; margin-bottom: 6px; }
  .sc-leg { grid-row: 2; }
  .sc-leg.end { justify-self: end; }

  .sc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Text im SVG skaliert mit der Grafik mit — auf dem Handy waere er
     sonst halb so gross wie der Rest der Seite. */
  .sc-pin { font-size: 15px; }
  .sc-xlab text { font-size: 13px; }

  .sc-msg { max-width: 100%; grid-template-columns: 40px 1fr; gap: 9px; font-size: 13px; }
  .sc-slots li { grid-template-columns: 42px 1fr; gap: 9px; }
  .sc-slot { font-size: 12px; }
  .sc-tile span { font-size: 10px; }
  .sc-tile.void span { font-size: 15px; }
  .sc-drops li { grid-template-columns: 38px 1fr; gap: 9px; font-size: 12px; }
  .sc-stamp { right: 8px; font-size: 9px; padding: 4px 8px; }
}

/* Ohne .anim stehen beide Akte untereinander — dann braucht der zweite
   eine eigene Ueberschrift, weil die wechselnde Bildunterschrift oben
   nur den ersten beschriftet. */
.sc-b-cap { color: var(--accent-2); }
.scene.anim .sc-b-cap { display: none; }