/* =====================================================================
   Scroll-Szenen – gemeinsame Bühne (alle vier Leistungen)
   Markup: .rob-scene > .rob-stage > (.rob-stage-glow, .rob-rail, .rob-text, .rob-canvas, .rob-final)
   ===================================================================== */
.rob-scene { position: relative; background: var(--white); padding: clamp(32px, 5vw, 60px) var(--gutter-safe); }
.rob-stage {
  position: relative; overflow: hidden; isolation: isolate;
  height: min(90vh, 780px); height: min(90dvh, 780px);
  display: grid; grid-template-columns: 44% 56%;
  color: var(--white); background: var(--stage);
  max-width: 1008px; margin: 0 auto; border-radius: var(--r-card);
  box-shadow: 0 20px 60px rgba(16, 28, 54, .18);
  outline-offset: 4px;
  /* kein touch-action: die Szene entscheidet per preventDefault selbst, wann sie Wischen abfängt */
  -webkit-user-select: none; user-select: none;
}
.rob-stage:focus-visible { outline: 3px solid var(--blue); }
.rob-stage-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 100%, rgba(224, 84, 32, .18) 0%, rgba(15, 20, 40, 0) 55%); pointer-events: none; }

/* Fortschrittsleiste links */
.rob-rail { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 2; transition: opacity .2s; }
.rob-rail-item { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rob-rail-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; border: 1px solid rgba(163, 196, 242, .5); transition: background .2s, border-color .2s; }
.rob-rail-dot.is-reached { background: var(--orange-dark); border-color: var(--orange-dark); }
.rob-rail-line { width: 1px; height: 34px; background: rgba(163, 196, 242, .25); position: relative; overflow: hidden; }
.rob-rail-fill { position: absolute; left: 0; top: 0; width: 1px; height: 0; background: var(--orange-dark); }

/* Textspalte */
.rob-text { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 24px 0 72px; gap: 14px; min-width: 0; transition: opacity .2s, transform .2s; will-change: opacity, transform; }
.rob-kicker { font-size: 12px; font-weight: 700; letter-spacing: 1.6px; color: var(--orange-dark); text-transform: uppercase; }
.rob-num { font-size: 15px; font-weight: 300; color: rgba(163, 196, 242, .85); letter-spacing: .5px; }
.rob-text h2 { font-size: clamp(28px, 3.2vw, 46px); font-weight: 400; line-height: 1.15; margin: 0; color: var(--white); text-wrap: pretty; }
.rob-text p { font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .78); margin: 0; max-width: 520px; }
.rob-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rob-tag { border: 1px solid rgba(163, 196, 242, .4); color: var(--blueprint); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; border-radius: var(--r-pill); padding: 6px 12px; white-space: nowrap; }

/* Zeichnung */
.rob-canvas { position: relative; min-width: 0; transition: opacity .2s; }
.rob-canvas > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rob-canvas > svg text { font-family: var(--font); }
.rob-hint { position: absolute; left: 0; right: 0; bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(163, 196, 242, .8); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-align: center; padding: 0 16px; pointer-events: none; transition: opacity .2s; }
.rob-hint .ic { animation: rob-hint-bounce 1.6s ease-in-out infinite; }
@keyframes rob-hint-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Finale (Overlay) */
.rob-final { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px; padding: 24px clamp(20px, 8vw, 80px); opacity: 0; pointer-events: none; transform: translateY(24px); transition: opacity .25s, transform .25s; overflow: hidden; }
.rob-final-kicker { font-size: 12px; font-weight: 700; letter-spacing: 1.6px; color: var(--orange-dark); text-transform: uppercase; }
.rob-final h2 { font-size: clamp(36px, 6vw, 88px); font-weight: 400; line-height: 1.05; margin: 0; color: var(--white); }
.rob-final p { font-size: clamp(15px, 1rem + .2vw, 17px); line-height: 1.55; color: rgba(255, 255, 255, .78); margin: 0; max-width: 560px; }
.rob-final-stats { display: flex; gap: clamp(20px, 3vw, 36px); margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.rob-final-stat .v { font-size: clamp(24px, 1.4rem + .8vw, 30px); font-weight: 600; color: var(--orange-dark); line-height: 1; }
.rob-final-stat .t { font-size: 12.5px; color: rgba(255, 255, 255, .7); margin-top: 6px; }
.rob-final-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--orange); color: var(--white); border-radius: var(--r-pill); padding: 16px 30px; font-size: 15px; font-weight: 700; margin-top: 8px; min-height: 48px; }
.rob-final-cta:hover { background: var(--orange-hover); }

/* Überspringen (nur per Tastatur sichtbar) */
.rob-skip { position: absolute; top: 12px; right: 12px; z-index: 4; background: rgba(255, 255, 255, .12); color: var(--white); border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--r-pill); padding: 8px 14px; font-size: 12px; font-weight: 700; opacity: 0; pointer-events: none; }
.rob-skip:focus-visible, .rob-stage:focus-visible ~ .rob-skip { opacity: 1; pointer-events: auto; }
.is-final .rob-skip, .is-reduced .rob-skip { display: none; }

/* Reduced Motion: Endzustand direkt sichtbar */
.is-reduced .rob-canvas, .is-reduced .rob-rail, .is-reduced .rob-hint, .is-reduced .rob-text { display: none; }
.is-reduced .rob-stage { display: flex; height: auto; min-height: 480px; }
.is-reduced .rob-final { opacity: 1; pointer-events: auto; transform: none; position: relative; inset: auto; overflow: visible; flex: 1 1 auto; padding: clamp(40px, 6vw, 72px) clamp(20px, 8vw, 80px); }

/* Mobile: Text oben, Zeichnung unten – bleibt abgerundete Kachel mit Seitenrand wie alle Karten */
@media (max-width: 860px) {
  .rob-scene { padding: 32px var(--gutter-safe); }
  .rob-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: 44% 56%; border-radius: var(--r-card); }
  .rob-rail { display: none; }
  .rob-text { padding: 24px var(--card-x) 0; justify-content: flex-start; gap: 10px; }
  .rob-text h2 { font-size: 24px; }
  .rob-text p { font-size: 14px; }
  .rob-tags { gap: 6px; }
  .rob-tag { font-size: 10px; padding: 5px 10px; }
  .rob-hint { bottom: 16px; font-size: 10px; }
  .rob-final { gap: 16px; padding: 24px var(--card-x); }
  .rob-final-stats { gap: 16px 24px; }
}
@media (max-width: 520px) {
  .rob-stage { height: min(92vh, 640px); height: min(92dvh, 640px); grid-template-rows: 46% 54%; }
  .rob-text h2 { font-size: 22px; }
  .rob-final h2 { font-size: 34px; }
  .rob-final-cta { width: 100%; }
}