/* Ausgangslage — ruhige Brücke zwischen Hero und Ablauf */
.fob-problem{position:relative;overflow:clip;padding:88px 0 0;background:var(--fw-white)}
.fob-problem+.fps4-story{border-top:0}
.fob-problem-inner{position:relative}
.fob-problem-head{max-width:980px;margin:0 auto;text-align:center}
.fob-problem-label{margin:0 0 18px;color:var(--fw-ink-500);font-size:.75rem;font-weight:500;line-height:1.5;letter-spacing:.1em;text-transform:uppercase}
.fob-problem-head h2{margin:0;color:var(--fw-navy-800);font-size:var(--fw-h2);font-weight:500;letter-spacing:-.04em;line-height:1.08;text-wrap:balance}
.fob-problem-head h2 span{display:block;margin-top:8px;color:var(--fw-ink-600);font-weight:450}
.fob-problem-grid{display:grid;grid-template-columns:repeat(3,minmax(0,340px));justify-content:center;align-items:stretch;gap:24px;margin:44px auto 0;padding:0;list-style:none}
.fob-problem-card{min-width:0;overflow:hidden;border:1px solid var(--fw-line);border-radius:var(--fw-radius-card,12px);background:var(--fw-surface-soft);box-shadow:0 4px 14px -12px rgba(0,31,65,.24);opacity:0;translate:0 14px}
.fob-problem.is-visible .fob-problem-card{opacity:1;translate:0 0;transition:opacity 500ms cubic-bezier(.2,.7,.2,1),translate 500ms cubic-bezier(.2,.7,.2,1)}
.fob-problem.is-visible .fob-problem-card:nth-child(1){transition-delay:0ms}
.fob-problem.is-visible .fob-problem-card:nth-child(2){transition-delay:80ms}
.fob-problem.is-visible .fob-problem-card:nth-child(3){transition-delay:160ms}
.fob-problem-visual{height:140px;padding:10px 12px 0;border-bottom:1px solid var(--fw-line);background:var(--fw-surface-muted)}
.fob-problem-visual svg{display:block;width:100%;height:100%}
.fob-problem-copy{padding:20px 21px 22px}
.fob-problem-copy h3{margin:0;color:var(--fw-navy-800);font-size:17px;font-weight:500;letter-spacing:-.02em;line-height:1.3}
.fob-problem-text{margin:9px 0 0;color:var(--fw-text-secondary);font-size:13px;line-height:1.58}
.fob-problem-text--mobile{display:none}

.fob-v-surface{fill:var(--fw-surface-soft);stroke:var(--fw-line-strong);stroke-width:1}
.fob-v-muted-strong{fill:var(--fw-ink-500);opacity:.42}
.fob-v-muted{fill:var(--fw-ink-400);opacity:.27}
.fob-v-faint{fill:var(--fw-ink-400);opacity:.15}
.fob-v-accent-soft{fill:var(--fw-cyan-100)}
.fob-v-accent{fill:var(--fw-cyan-600);opacity:.62}
.fob-v-badge-text{fill:var(--fw-cyan-700);font:600 10px var(--fw-font)}
.fob-v-text{fill:var(--fw-ink-500);font:500 9px var(--fw-font)}
.fob-v-key{font-size:8.5px}
.fob-v-sheet{fill:var(--fw-surface-soft);stroke:var(--fw-line-strong);stroke-width:1}
.fob-v-sheet-head{fill:var(--fw-surface-muted)}
.fob-v-grid{fill:none;stroke:var(--fw-line-strong);stroke-width:1}
.fob-v-cell{fill:var(--fw-surface-muted)}
.fob-v-active-cell{fill:none;stroke:var(--fw-cyan-600);stroke-width:1.5;opacity:.72}
.fob-v-filename{font-family:var(--fw-mono);font-size:8.5px}
.fob-v-filename-short{display:none}
.fob-v-doc-title{font-size:8.5px;font-weight:600}
.fob-v-line{stroke:var(--fw-line-strong);stroke-width:1}
.fob-v-caret{stroke:var(--fw-cyan-600);stroke-width:1.5}
.fob-v-signature{fill:none;stroke:var(--fw-ink-400);stroke-width:1.3;stroke-linecap:round;opacity:.55}
.fob-v-doc-count{font-size:11px;font-weight:600}

.fob-problem-bridge{display:grid;justify-items:center;margin-top:40px}
.fob-problem-line{position:relative;width:2px;overflow:hidden;border-radius:999px;background:var(--fw-line)}
.fob-problem-line--top{height:132px}
.fob-problem-line--bottom{height:42px;margin-top:18px}
.fob-problem-line>span{position:absolute;inset:0;border-radius:inherit;background:var(--fw-cyan-600);transform:scaleY(var(--fob-line-progress,0));transform-origin:top;will-change:transform}
.fob-problem-line--bottom>span{transform:scaleY(var(--fob-lower-progress,0))}
.fob-problem-sign{display:grid;place-items:center;width:54px;height:54px;margin-top:-1px;border-radius:50%;background:var(--fw-navy-800);box-shadow:0 0 0 0 rgba(11,159,216,0);transform:scale(.9);transition:transform 360ms cubic-bezier(.2,.8,.2,1),box-shadow 520ms ease}
.fob-problem-sign img{width:22px;height:22px;filter:brightness(0) invert(1)}
.fob-problem.is-bridge-active .fob-problem-sign{transform:scale(1);box-shadow:0 0 0 8px rgba(11,159,216,.10)}

@media(max-width:1023px) and (min-width:768px){
  .fob-problem{padding-top:76px}
  .fob-problem-grid{gap:16px;margin-top:38px}
  .fob-problem-visual{height:110px;padding:5px 8px 0}
  .fob-problem-copy{padding:17px 16px 19px}
  .fob-problem-copy h3{font-size:15px}
  .fob-problem-text{font-size:12px}
  .fob-v-text{font-size:8px}
  .fob-problem-line--top{height:112px}
}

@media(max-width:767px){
  .fob-problem{padding-top:64px}
  .fob-problem-head{padding-inline:4px}
  .fob-problem-head h2{font-size:clamp(1.9rem,9vw,2.55rem);line-height:1.07}
  .fob-problem-grid{grid-template-columns:1fr;gap:16px;margin-top:32px}
  .fob-problem-card{translate:0 10px}
  .fob-problem-visual{height:90px;padding:0 8px}
  .fob-problem-copy{padding:15px 17px 17px}
  .fob-problem-copy h3{font-size:16px}
  .fob-problem-text--desktop{display:none}
  .fob-problem-text--mobile{display:block;font-size:12px;line-height:1.5}
  .fob-mobile-hide,.fob-v-key{display:none}
  .fob-v-filename{display:none}
  .fob-v-filename-short{display:block;font-size:8.5px}
  .fob-problem-bridge{margin-top:30px}
  .fob-problem-line--top{height:72px}
  .fob-problem-line--bottom{height:28px;margin-top:14px}
  .fob-problem-sign{width:40px;height:40px}
  .fob-problem-sign img{width:17px;height:17px}
  .fob-problem-transition{margin-top:11px;font-size:16px}
}

@media(prefers-reduced-motion:reduce){
  .fob-problem-card,.fob-problem.is-visible .fob-problem-card{opacity:1;translate:0 0;transition:none}
  .fob-problem-line>span,.fob-problem-line--bottom>span{transform:scaleY(1)}
  .fob-problem-sign,.fob-problem.is-bridge-active .fob-problem-sign{transform:scale(1);box-shadow:none;transition:none}
}

/* =========================================================
   Ausgangslage · Konvergenz v2
   Drei getrennte Werkzeuge laufen einmalig in fobi zusammen.
   ========================================================= */

.fob-problem-inner{position:relative}

.fob-problem-head,
.fob-problem-grid{
  position:relative;
  z-index:2;
}

.fob-problem-card{
  opacity:1 !important;
  transform:none !important;
  translate:none !important;
  rotate:none !important;
  transition:none !important;
}

.fob-convergence-svg{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}

.fob-convergence-path,
.fob-convergence-impulse{
  fill:none;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.fob-convergence-path{
  stroke:url(#fob-convergence-gradient);
  stroke-width:1.75;
}

.fob-convergence-impulse{
  stroke:color-mix(in srgb,var(--fw-white) 58%,var(--fw-cyan-600));
  stroke-width:3;
  opacity:0;
}

.fob-convergence{
  position:relative;
  z-index:3;
  display:grid;
  justify-items:center;
  margin-top:0;
  padding-top:158px;
  text-align:center;
}

.fob-convergence-sign{
  position:relative;
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  opacity:0;
  transform:scale(.9);
}

.fob-convergence-core{
  position:relative;
  z-index:3;
  display:grid;
  place-items:center;
  width:60px;
  height:60px;
  overflow:hidden;
  border-radius:50%;
  background:var(--fw-navy-800);
  box-shadow:
    0 2px 8px rgb(0 31 65 / 18%),
    0 12px 34px -12px rgb(11 159 216 / 32%);
}

.fob-convergence-core img{
  width:26px;
  height:26px;
  filter:brightness(0) invert(1);
}

.fob-convergence-ring{
  position:absolute;
  z-index:1;
  inset:50% auto auto 50%;
  border:1px solid rgb(11 159 216 / 22%);
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.82);
}

.fob-convergence-ring--inner{width:76px;height:76px}
.fob-convergence-ring--outer{
  width:94px;
  height:94px;
  border-color:rgb(11 159 216 / 12%);
}

.fob-convergence-shine{
  position:absolute;
  inset:-20% auto -20% -55%;
  width:38%;
  transform:translateX(-180%) rotate(12deg);
  background:linear-gradient(
    105deg,
    transparent 0%,
    rgb(255 255 255 / 5%) 34%,
    rgb(255 255 255 / 58%) 50%,
    rgb(255 255 255 / 8%) 66%,
    transparent 100%
  );
  opacity:0;
}

.fob-convergence.is-animating .fob-convergence-sign,
.fob-convergence.is-animating .fob-convergence-ring,
.fob-convergence.is-animating .fob-convergence-shine{
  will-change:transform,opacity;
}

.fob-convergence.is-ignited .fob-convergence-sign,
.fob-convergence.is-complete .fob-convergence-sign{
  opacity:1;
  transform:scale(1);
  transition:
    opacity 260ms var(--fw-ease),
    transform 360ms var(--fw-ease);
}

.fob-convergence.is-ignited .fob-convergence-ring--inner{
  animation:fob-convergence-ring-in 520ms var(--fw-ease) both;
}

.fob-convergence.is-ignited .fob-convergence-ring--outer{
  animation:fob-convergence-ring-out 620ms var(--fw-ease) both;
}

.fob-convergence.is-shining .fob-convergence-shine{
  animation:fob-convergence-shine 520ms var(--fw-ease) both;
}

.fob-convergence .fob-problem-transition{
  width:min(100%,520px);
  margin:22px auto 0;
  color:var(--fw-navy-800);
  font-size:1.075rem;
  font-weight:500;
  line-height:1.5;
  opacity:0;
  transform:translateY(6px);
}

.fob-convergence.is-ignited .fob-problem-transition,
.fob-convergence.is-complete .fob-problem-transition{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity 320ms var(--fw-ease) 80ms,
    transform 320ms var(--fw-ease) 80ms;
}

@keyframes fob-convergence-ring-in{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.82)}
  32%{opacity:.44}
  100%{opacity:.18;transform:translate(-50%,-50%) scale(1)}
}

@keyframes fob-convergence-ring-out{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  30%{opacity:.34}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.28)}
}

@keyframes fob-convergence-shine{
  0%{opacity:0;transform:translateX(-180%) rotate(12deg)}
  18%{opacity:.65}
  78%{opacity:.42}
  100%{opacity:0;transform:translateX(520%) rotate(12deg)}
}

@media(max-width:1023px){
  .fob-convergence{padding-top:132px}
  .fob-convergence-sign{width:56px;height:56px}
  .fob-convergence-core{width:52px;height:52px}
  .fob-convergence-core img{width:23px;height:23px}
  .fob-convergence-ring--inner{width:66px;height:66px}
  .fob-convergence-ring--outer{width:82px;height:82px}
}

@media(max-width:767px){
  .fob-problem-grid{position:relative}
  .fob-convergence{padding-top:58px}
  .fob-convergence-sign{width:46px;height:46px}
  .fob-convergence-core{width:42px;height:42px}
  .fob-convergence-core img{width:19px;height:19px}
  .fob-convergence-ring--inner{width:56px;height:56px}
  .fob-convergence-ring--outer{width:68px;height:68px}

}

@media(prefers-reduced-motion:reduce){
  .fob-convergence-path{
    stroke-dasharray:none !important;
    stroke-dashoffset:0 !important;
  }

  .fob-convergence-impulse{display:none}

  .fob-convergence-sign,

  .fob-convergence-ring,
  .fob-convergence-shine{
    animation:none !important;
    opacity:0 !important;
  }
}




/* Ausgangslage · echter Mittelverbinder */
.fob-convergence-centerline{
  position:absolute;
  z-index:2;
  display:block;
  width:2px;
  margin-left:-1px;
  border-radius:999px;
  background:linear-gradient(
    180deg,
    var(--fw-line-strong,#c8d3e2) 0%,
    #b8cce0 58%,
    var(--fw-cyan-600,#0b9fd8) 100%
  );
  pointer-events:none;
}

.fob-problem-card,
.fob-convergence-sign{
  position:relative;
  z-index:3;
}

@media(max-width:767px){
  .fob-convergence-centerline{
    display:none;
  }
}

/* =========================================================
   fobi Web 1.1 · Ausgangslage mobile normalization
   ========================================================= */
.fob-problem-label{
  font-size:var(--fw-eyebrow-size);
  letter-spacing:var(--fw-eyebrow-tracking);
}

@media(max-width:767px){
  .fob-problem{
    padding-top:var(--fw-section-mobile);
  }

  .fob-problem-label{
    font-size:var(--fw-eyebrow-size-mobile);
  }

  .fob-problem-head h2{
    font-size:clamp(2rem,10vw,2.75rem);
    text-wrap:balance;
  }

  .fob-problem-grid{
    margin-top:36px;
  }

  .fob-problem-card{
    border-radius:var(--fw-radius-card);
  }

  .fob-problem-copy{
    padding:18px var(--fw-card-pad-mobile) 20px;
  }
}

/* Ausgangslage · Mobile ohne Konvergenz */
@media (max-width: 767px) {
  .fob-convergence {
    display: none !important;
  }

  .fob-problem-grid {
    margin-bottom: 0;
  }
}
/* END Ausgangslage · Mobile ohne Konvergenz */

/* Ausgangslage · Mobile nur Kacheln */
@media (max-width: 767px) {
  .fob-convergence,
  .fob-convergence-svg,
  .fob-convergence-path,
  .fob-convergence-impulse,
  .fob-convergence-tail,
  .fob-problem-bridge,
  .fob-problem-line {
    display: none !important;
  }

  .fob-problem-grid {
    margin-bottom: 0;
  }
}
/* END Ausgangslage · Mobile nur Kacheln */