/* cb02 · So geht's — drei Sticker als kompakte Liste neben Fritte mit der Lupe */
.ff-schritte__lead { margin-top: var(--space-4); }
.ff-schritte__liste {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
  max-width: 560px;
}
.ff-schritte__item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  column-gap: var(--space-5);
  align-items: start;
  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-5);
  border-radius: var(--radius-l);
}
.ff-schritte__item:nth-child(1) { --tilt: -1.6deg; }
.ff-schritte__item:nth-child(2) { --tilt: 1.2deg; margin-left: var(--space-6); }
.ff-schritte__item:nth-child(3) { --tilt: -.8deg; }

.ff-schritte__nr {
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  padding-bottom: 6px;
  background: var(--surface-nummer);
  border: 4px solid var(--border-sticker);
  border-radius: 50%;
  box-shadow: var(--shadow-sticker);
  rotate: -8deg;
}
.ff-schritte__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.1;
}
.ff-schritte__text { margin-top: var(--space-2); max-width: 40ch; }
.ff-schritte__privat {
  --tilt: -3deg;
  justify-self: start;
  margin-top: var(--space-4);
  background: var(--ff-minze);
}

/* Zusatz unter den Schritten: Kurzbefehl als Abkürzung, bewusst leise */
.ff-schritte__zusatz {
  max-width: 46ch;
  margin-top: var(--space-6);
  padding-left: var(--space-5);
  font-size: var(--fs-small);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .ff-schritte__item:nth-child(2) { margin-left: var(--space-4); }
}
@media (max-width: 420px) {
  .ff-schritte__item { grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--space-4); padding: var(--space-5) var(--space-4); }
  .ff-schritte__item:nth-child(2) { margin-left: 0; }
  .ff-schritte__nr { width: 44px; height: 44px; font-size: 1.3rem; }
  .ff-schritte__liste { padding-inline: 4px; }
  .ff-schritte__zusatz { padding-left: 4px; }
}

/* Bühne „Fritte prüft“
   Neben den drei Schritt-Stickern steht Fritte vor dem iPhone und hält die Lupe auf die Sternezeile des Screenshots.
   Die Lage der Figur wird aus der Lupe gerechnet: Lupenmitte im Rig = (--lx | --ly) in Figurhöhen
   (viewBox 240 × 320, Pose „lesen“ (38 | 101)). Zielpunkt im Screen = --ziel-x quer,
   Sternezeile bei 68 % der Screenhöhe (= 1,416 × iPhone-Breite ab Gehäuseoberkante).
   Normale Section-Größe: die Gruppe steht vollständig in der Bühne, nichts wird angeschnitten. */

.ff-schritte--b {
  --f: min(64svh, 560px);          /* Höhe der Figurfläche (SVG-Box) */
  --pw: calc(var(--f) * .36);      /* iPhone-Breite */
  --phone-x: 0px;
  --phone-y: calc(var(--f) * .02);
  --phone-dreh: -4deg;
  --ziel-x: .26;                   /* Lupe setzt links in der Sternezeile an */
  --dreh-x: .026;                  /* Versatz des Zielpunkts durch die Neigung, in iPhone-Breiten */
  --dreh-y: .012;
  --lx: .119;                      /* Lupenmitte quer, in Figurhöhen */
  --ly: .316;                      /* Lupenmitte hoch, in Figurhöhen */
  --blase-b: 16rem;
  --blase-l: .47;                  /* linke Blasenkante ab Figurbox, in Figurhöhen */
  --fx: calc(var(--phone-x) + var(--pw) * (.032 + .936 * var(--ziel-x)) - var(--f) * var(--lx) + var(--pw) * var(--dreh-x));
  --fy: calc(var(--phone-y) + var(--pw) * 1.416 - var(--f) * var(--ly) + var(--pw) * var(--dreh-y));
}

/* ---------- Szene: iPhone hinten, Fritte vorn, Blase am Kopf ---------- */
.ff-schritte-b__szene {
  position: relative;
  width: calc(var(--fx) + var(--f) * .5 + var(--blase-b));
  height: calc(var(--fy) + var(--f) * .94);
}

.ff-schritte--b .ff-schritte-b__phone {
  --phone-w: var(--pw);
  --tilt: var(--phone-dreh);
  position: absolute;
  z-index: 0;
  left: var(--phone-x);
  top: var(--phone-y);
}

/* zwei gestapelte Screenshots für den Wechsel */
.ff-schritte-b__bild {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.ff-schritte-b__bild[data-ff-aktiv] { opacity: 1; }

.ff-schritte-b__fritte {
  position: absolute;
  z-index: 1;
  left: var(--fx);
  top: var(--fy);
  width: calc(var(--f) * .75);
  height: var(--f);
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-l);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ff-schritte-b__fritte:focus-visible { outline: none; box-shadow: none; }
.ff-schritte-b__svg { width: 100%; height: 100%; }
.ff-schritte-b__fritte:focus-visible .ff-schritte-b__svg {
  filter: var(--rand-figur)
    drop-shadow(4px 0 0 var(--ff-pflaume)) drop-shadow(-4px 0 0 var(--ff-pflaume))
    drop-shadow(0 4px 0 var(--ff-pflaume)) drop-shadow(0 -4px 0 var(--ff-pflaume));
}
/* Endbild ohne Bewegungswunsch: die Pose steht still (das Rig setzt sie dort sonst nicht um) */
.ff-schritte--b [data-ff-rig] [data-teil="arm-l"] { rotate: var(--ff-arm-l, 0deg); }
.ff-schritte--b [data-ff-rig] [data-teil="lupe"] { rotate: var(--ff-lupe, 0deg); }
.ff-schritte--b [data-ff-rig] [data-teil="arm-r"] { rotate: var(--ff-arm-r, 0deg); }
.ff-schritte--b [data-ff-rig] [data-teil="kopf"] { translate: var(--ff-kopf-x, 0px) var(--ff-kopf-y, 0px); rotate: var(--ff-kopf-dreh, 0deg); }
.ff-schritte--b [data-ff-rig] :is([data-teil="braue-l"], [data-teil="braue-r"]) { translate: 0 var(--ff-braue-y, 0px); }
/* Die Box der Figur liegt über dem iPhone: nur die gezeichnete Figur nimmt Zeiger an,
   damit Hover auf dem Screen die Geschichte anhält */
@media (hover: hover) {
  .ff-schritte-b__fritte { pointer-events: none; }
  .ff-schritte-b__svg [data-teil="figur"] { pointer-events: visiblePainted; }
}

/* ---------- Sprechblase: oben rechts am Kopf, Rand zeigt das Urteil ---------- */
.ff-schritte-b__blase {
  --rand: var(--border-sticker);
  position: absolute;
  z-index: 2;
  left: calc(var(--fx) + var(--f) * var(--blase-l));
  bottom: calc(100% - var(--fy) - var(--f) * .19);
  width: max-content;
  max-width: var(--blase-b);
  text-wrap: balance;
  padding: var(--space-3) var(--space-5) var(--space-4);
  font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem);
  color: var(--ff-pflaume);
  border: var(--sticker-rand) solid var(--rand);
  rotate: -2deg;
  transform-origin: 12% 100%;
}
.ff-schritte-b__blase::before {
  left: 14%;
  bottom: -15px;
  border: solid var(--rand);
  border-width: 0 var(--sticker-rand) var(--sticker-rand) 0;
}
.ff-schritte-b__blase[data-ff-urteil="gut"] { --rand: var(--ff-minze); }
.ff-schritte-b__blase[data-ff-urteil="mittel"] { --rand: var(--ff-gold); }
.ff-schritte-b__blase[data-ff-urteil="nein"] { --rand: var(--ff-tomate); }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-ff-ruhig]) .ff-schritte-b__bild {
    transition: opacity 460ms var(--ease-weich);
  }
  :root:not([data-ff-ruhig]) .ff-schritte-b__blase,
  :root:not([data-ff-ruhig]) .ff-schritte-b__blase::before {
    transition: border-color 320ms var(--ease-weich);
  }
  /* Urteil fällt: Blase federt einmal nach */
  :root:not([data-ff-ruhig]) .ff-schritte-b__blase[data-ff-urteil] {
    animation: ff-schritte-b-urteil 520ms var(--ease-pop);
  }
  :root:not([data-ff-ruhig]) .ff-schritte-b__fritte:active { scale: .97; }

  /* Augen folgen der Lupe: gleicher Takt wie ff-lupe-lesen (3,6 s, 620 ms Versatz) */
  :root:not([data-ff-ruhig]) .ff-schritte--b [data-ff-rig][data-ff-pose="lesen"] :is([data-teil="pupille-l"], [data-teil="pupille-r"]) {
    animation: ff-schritte-b-blick 3.6s cubic-bezier(.45, 0, .55, 1) 620ms infinite;
  }
  /* Stufe 2: Lupe und Blick halten an der Sternezeile */
  :root:not([data-ff-ruhig]) .ff-schritte--b [data-ff-rig][data-ff-lupe-halt] :is([data-teil="arm-l"], [data-teil="lupe"], [data-teil="pupille-l"], [data-teil="pupille-r"]) {
    animation-play-state: paused;
  }
  /* Zeiger auf dem iPhone oder Section außer Sicht: alles steht still */
  :root:not([data-ff-ruhig]) .ff-schritte-b__szene[data-ff-halt] [data-ff-rig] [data-teil] {
    animation-play-state: paused;
  }
  /* Auf keinen Fall: Kopfschütteln als Abwandlung von ff-nicken */
  :root:not([data-ff-ruhig]) .ff-schritte--b [data-ff-rig][data-ff-schuetteln] [data-teil="kopf"] {
    animation: ff-schritte-b-schuetteln 900ms var(--ease-weich);
  }
}

@keyframes ff-schritte-b-blick {
  0%, 10% { translate: -4.5px -1.5px; }
  40% { translate: -2px -1.5px; }
  50%, 58% { translate: -4.5px .8px; }
  88% { translate: -2px .8px; }
  100% { translate: -4.5px -1.5px; }
}
@keyframes ff-schritte-b-schuetteln {
  0%, 100% { rotate: var(--ff-kopf-dreh, 0deg); }
  18% { rotate: calc(var(--ff-kopf-dreh, 0deg) - 9deg); }
  38% { rotate: calc(var(--ff-kopf-dreh, 0deg) + 8deg); }
  58% { rotate: calc(var(--ff-kopf-dreh, 0deg) - 6deg); }
  78% { rotate: calc(var(--ff-kopf-dreh, 0deg) + 3deg); }
}
@keyframes ff-schritte-b-urteil {
  0% { scale: 1; }
  35% { scale: 1.07; }
  100% { scale: 1; }
}

/* ---------- Mobil: Gruppe unter den Schritten, iPhone leicht schräg ---------- */
@media (max-width: 900px) {
  .ff-schritte--b {
    --f: min(80vw, 330px);
    --pw: calc(var(--f) * .5);
    --phone-x: 20px;
    --phone-y: 12px;
    --phone-dreh: -10deg;
    --ziel-x: .5;
    --dreh-x: .064;
    --dreh-y: -.006;
    --blase-b: 12rem;
  }
  .ff-schritte-b__szene {
    width: 100%;
    max-width: 420px;
    justify-self: center;
  }
  .ff-schritte-b__blase {
    left: auto;
    right: 0;
    bottom: calc(100% - var(--fy) - var(--f) * .12);
    padding: var(--space-3) var(--space-4) var(--space-3);
  }
  .ff-schritte-b__blase::before { left: 12%; }
}