/* =========================================================
   Support & Einführung · v4
   ========================================================= */

.support-section{
  --support-surface:var(--fw-surface-soft,#f5f8fc);
  --support-line:var(--fw-line,#e1e7f0);
  --support-text:var(--fw-navy-900,#001428);
  --support-muted:var(--fw-ink-500,#66768f);
  --support-soft:var(--fw-ink-400,#7f8ca5);
  --support-accent:var(--fw-cyan-600,#0b9fd8);
  --support-success:#2c8c67;
  --support-danger:#c94a4a;
  padding:112px 0 112px;
  background:#fff;
  color:var(--support-text);
}

.support-inner{
  display:grid;
  gap:48px;
}

.support-head{
  max-width:960px;
}

.support-label,
.support-onboarding-label{
  margin:0 0 16px;
  color:var(--support-accent);
  font-size:.76rem;
  font-weight:650;
  letter-spacing:.105em;
  line-height:1.3;
  text-transform:uppercase;
}

.support-head h2{
  max-width:940px;
  margin:0;
  font-size:var(--fw-h2,clamp(2.2rem,4.2vw,4rem));
  letter-spacing:-.045em;
  line-height:1.03;
}

.support-title-main,
.support-title-soft{
  display:block;
}

.support-title-soft{
  color:var(--support-soft);
  font-weight:inherit;
}

.support-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:84px;
  padding:42px 0 46px;
  border-top:1px solid var(--support-line);
  border-bottom:1px solid var(--support-line);
}

.support-team,
.support-promises{
  min-width:0;
}

.support-avatar{
  position:relative;
  display:grid;
  place-items:center;
  width:86px;
  height:86px;
  overflow:hidden;
  border:3px solid #fff;
  border-radius:50%;
  background:var(--fw-cyan-100,#e3f4fc);
  color:var(--fw-cyan-700,#0576a6);
  font-size:1rem;
  font-weight:700;
  letter-spacing:.04em;
  box-sizing:border-box;
}

.support-avatar--sascha{
  z-index:2;
  background:var(--fw-surface-muted,#edf2f8);
  color:var(--fw-navy-700,#11316e);
}

.support-avatar--jana{
  z-index:3;
  background:#eef7f4;
  color:#24664f;
}

.support-team-copy{
  max-width:540px;
  margin-top:26px;
}

.support-people{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:30px 34px;
  align-items:start;
}

.support-person{
  min-width:0;
}

.support-person .support-avatar{
  margin-bottom:16px;
}

.support-person p{
  margin:0;
}

.support-person strong,
.support-person p span{
  display:block;
}

.support-person strong{
  color:var(--support-text);
  font-size:.88rem;
  font-weight:620;
  line-height:1.35;
}

.support-person p span{
  margin-top:4px;
  color:var(--support-muted);
  font-size:.78rem;
  line-height:1.42;
}

.support-people strong{
  color:var(--support-text);
  font-size:.88rem;
  font-weight:620;
  line-height:1.35;
}

.support-people span{
  margin-top:4px;
  color:var(--support-muted);
  font-size:.78rem;
  line-height:1.42;
}

.support-team-text{
  max-width:500px;
  margin:26px 0 0;
  color:var(--support-muted);
  font-size:.98rem;
  line-height:1.68;
}

.support-status{
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:100%;
  margin-top:24px;
}

.support-status-dot{
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:var(--support-success);
}

.support-status-copy{
  display:grid;
  gap:1px;
}

.support-status-copy strong{
  color:var(--support-text);
  font-size:.78rem;
  font-weight:600;
  line-height:1.3;
}

.support-status-copy small{
  color:var(--support-muted);
  font-size:.68rem;
  line-height:1.35;
}

.support-status.is-available .support-status-dot{
  background:var(--support-success);
  animation:support-status-pulse 2.5s ease-out infinite;
}

.support-status.is-unavailable .support-status-dot{
  background:var(--support-danger);
  animation:none;
}

@keyframes support-status-pulse{
  0%{box-shadow:0 0 0 0 rgb(44 140 103 / 24%)}
  68%{box-shadow:0 0 0 7px rgb(44 140 103 / 0%)}
  100%{box-shadow:0 0 0 0 rgb(44 140 103 / 0%)}
}

.support-promises{
  display:flex;
  align-items:center;
}

.support-promises ul{
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
}

.support-promises li{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:16px;
  padding:24px 0;
  border-bottom:1px solid var(--support-line);
}

.support-promises li:first-child{
  padding-top:0;
}

.support-promises li:last-child{
  padding-bottom:0;
  border-bottom:0;
}

.support-promises svg{
  width:20px;
  height:20px;
  margin-top:1px;
  fill:none;
  stroke:var(--support-accent);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.support-promises h3{
  margin:0;
  font-size:1rem;
  font-weight:620;
  line-height:1.4;
}

.support-promises p{
  max-width:470px;
  margin:7px 0 0;
  color:var(--support-muted);
  font-size:.9rem;
  line-height:1.6;
}

.support-onboarding{
  position:relative;
  padding:32px 40px 34px;
  border-radius:var(--fw-radius-card,12px);
  background:var(--support-surface);
  overflow:hidden;
}

.support-onboarding-label{
  margin-bottom:22px;
  color:var(--support-muted);
}

.support-onboarding ol{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:44px;
  margin:0;
  padding:0;
  list-style:none;
}

.support-start-step{
  position:relative;
  min-width:0;
}

.support-start-step::after{
  content:"";
  position:absolute;
  z-index:1;
  top:7px;
  left:7px;
  width:calc(100% + 44px);
  height:2px;
  transform-origin:left;
}

.support-start-step--one::after{
  background:var(--support-accent);
}

.support-start-step--two::after{
  background:repeating-linear-gradient(
    90deg,
    var(--support-accent) 0 8px,
    transparent 8px 14px
  );
}

.support-start-step--three::after{
  display:none;
}

.support-start-marker{
  position:relative;
  z-index:2;
  display:block;
  width:14px;
  height:14px;
  margin-bottom:20px;
  border-radius:50%;
  box-sizing:border-box;
}

.support-start-marker--filled{
  border:3px solid var(--support-accent);
  background:var(--support-accent);
}

.support-start-marker--goal{
  width:18px;
  height:18px;
  margin-top:-2px;
  margin-left:-2px;
  margin-bottom:18px;
  border:2px solid var(--support-accent);
  background:var(--support-surface);
  box-shadow:0 0 0 4px rgb(11 159 216 / 7%);
}

.support-start-copy h3{
  margin:0;
  font-size:.98rem;
  font-weight:620;
  line-height:1.35;
}

.support-start-copy p{
  max-width:310px;
  margin:8px 0 0;
  color:var(--support-muted);
  font-size:.86rem;
  line-height:1.58;
}

/* ---------------------------------------------------------
   Entrance motion
   --------------------------------------------------------- */

.support-section.support-enhanced .support-label,
.support-section.support-enhanced .support-title-main,
.support-section.support-enhanced .support-title-soft,
.support-section.support-enhanced .support-person .support-avatar,
.support-section.support-enhanced .support-person p,
.support-section.support-enhanced .support-team-text,
.support-section.support-enhanced .support-status,
.support-section.support-enhanced .support-promises li,
.support-section.support-enhanced .support-start-copy{
  opacity:0;
  transform:translateY(10px);
}

.support-section.support-enhanced .support-start-step::after{
  transform:scaleX(0);
}

.support-section.support-enhanced .support-start-marker{
  opacity:.35;
  transform:scale(.78);
}

.support-section.support-enhanced.is-visible .support-label{
  opacity:1;
  transform:translateY(0);
  transition:opacity 360ms cubic-bezier(.22,1,.36,1),transform 360ms cubic-bezier(.22,1,.36,1);
}

.support-section.support-enhanced.is-visible .support-title-main{
  opacity:1;
  transform:translateY(0);
  transition:opacity 420ms cubic-bezier(.22,1,.36,1) 60ms,transform 420ms cubic-bezier(.22,1,.36,1) 60ms;
}

.support-section.support-enhanced.is-visible .support-title-soft{
  opacity:1;
  transform:translateY(0);
  transition:opacity 420ms cubic-bezier(.22,1,.36,1) 130ms,transform 420ms cubic-bezier(.22,1,.36,1) 130ms;
}

.support-section.support-enhanced.is-visible .support-person .support-avatar,
.support-section.support-enhanced.is-visible .support-person p{
  opacity:1;
  transform:translateY(0);
  transition:opacity 400ms cubic-bezier(.22,1,.36,1),transform 400ms cubic-bezier(.22,1,.36,1);
}

.support-section.support-enhanced.is-visible .support-person:nth-child(1) .support-avatar{transition-delay:170ms}
.support-section.support-enhanced.is-visible .support-person:nth-child(2) .support-avatar{transition-delay:240ms}
.support-section.support-enhanced.is-visible .support-person:nth-child(3) .support-avatar{transition-delay:310ms}
.support-section.support-enhanced.is-visible .support-person:nth-child(4) .support-avatar{transition-delay:380ms}

.support-section.support-enhanced.is-visible .support-person:nth-child(1) p{transition-delay:240ms}
.support-section.support-enhanced.is-visible .support-person:nth-child(2) p{transition-delay:310ms}
.support-section.support-enhanced.is-visible .support-person:nth-child(3) p{transition-delay:380ms}
.support-section.support-enhanced.is-visible .support-person:nth-child(4) p{transition-delay:450ms}

.support-section.support-enhanced.is-visible .support-team-text,
.support-section.support-enhanced.is-visible .support-status{
  opacity:1;
  transform:translateY(0);
  transition:opacity 400ms cubic-bezier(.22,1,.36,1),transform 400ms cubic-bezier(.22,1,.36,1);
}

.support-section.support-enhanced.is-visible .support-team-text{transition-delay:420ms}
.support-section.support-enhanced.is-visible .support-status{transition-delay:490ms}

.support-section.support-enhanced.is-visible .support-promises li{
  opacity:1;
  transform:translateY(0);
  transition:opacity 400ms cubic-bezier(.22,1,.36,1),transform 400ms cubic-bezier(.22,1,.36,1);
  transition-delay:calc(230ms + (var(--i) * 90ms));
}

.support-section.support-enhanced.is-visible .support-start-step--one::after{
  transform:scaleX(1);
  transition:transform 430ms cubic-bezier(.22,1,.36,1) 320ms;
}

.support-section.support-enhanced.is-visible .support-start-step--two::after{
  transform:scaleX(1);
  transition:transform 430ms cubic-bezier(.22,1,.36,1) 690ms;
}

.support-section.support-enhanced.is-visible .support-start-marker{
  opacity:1;
  transform:scale(1);
  transition:opacity 220ms ease,transform 260ms cubic-bezier(.22,1,.36,1);
}

.support-section.support-enhanced.is-visible .support-start-step--one .support-start-marker{transition-delay:290ms}
.support-section.support-enhanced.is-visible .support-start-step--two .support-start-marker{transition-delay:650ms}
.support-section.support-enhanced.is-visible .support-start-step--three .support-start-marker{transition-delay:1040ms}

.support-section.support-enhanced.is-visible .support-start-copy{
  opacity:1;
  transform:translateY(0);
  transition:opacity 360ms cubic-bezier(.22,1,.36,1),transform 360ms cubic-bezier(.22,1,.36,1);
  transition-delay:calc(390ms + (var(--step) * 350ms));
}

@media(max-width:1023px){
  .support-section{
    padding:96px 0;
  }

  .support-inner{
    gap:44px;
  }

  .support-main{
    grid-template-columns:1fr;
    gap:0;
    padding:0;
  }

  .support-team,
  .support-promises{
    padding:36px 0;
  }

  .support-team{
    border-bottom:1px solid var(--support-line);
  }

  .support-team-copy{
    max-width:720px;
  }

  .support-promises p{
    max-width:680px;
  }

  .support-onboarding{
    padding-inline:32px;
  }

  .support-onboarding ol{
    gap:28px;
  }

  .support-start-step::after{
    width:calc(100% + 28px);
  }

  .support-start-copy p{
    max-width:230px;
  }
}

@media(max-width:767px){
  .support-section{
    padding:76px 0;
  }

  .support-inner{
    gap:36px;
  }

  .support-head h2{
    font-size:clamp(2rem,10vw,2.75rem);
  }

  .support-team{
    padding:30px 0 32px;
  }

  .support-avatar{
    width:76px;
    height:76px;
  }

  .support-avatar + .support-avatar{
    margin-left:-21px;
  }

  .support-team-copy{
    margin-top:22px;
  }

  .support-people{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 18px;
  }

  .support-person .support-avatar{
    margin-bottom:12px;
  }

  .support-person strong{
    font-size:.8rem;
  }

  .support-person p span{
    margin-top:3px;
    font-size:.7rem;
  }

  .support-team-text{
    margin-top:20px;
    font-size:.94rem;
  }

  .support-status{
    width:100%;
    box-sizing:border-box;
    margin-top:20px;
    border-radius:12px;
  }

  .support-promises{
    padding:28px 0 0;
  }

  .support-promises li{
    padding:20px 0;
  }

  .support-promises li:first-child{
    padding-top:0;
  }

  .support-promises li:last-child{
    padding-bottom:28px;
  }

  .support-onboarding{
    padding:27px 24px 29px;
  }

  .support-onboarding-label{
    margin-bottom:24px;
  }

  .support-onboarding ol{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
  }

  .support-start-step{
    display:grid;
    grid-template-columns:20px minmax(0,1fr);
    gap:14px;
    min-height:114px;
  }

  .support-start-step:last-child{
    min-height:0;
  }

  .support-start-step::after{
    top:9px;
    left:6px;
    width:2px;
    height:calc(100% - 2px);
    transform-origin:top;
  }

  .support-start-step--two::after{
    background:repeating-linear-gradient(
      180deg,
      var(--support-accent) 0 8px,
      transparent 8px 14px
    );
  }

  .support-start-marker{
    width:14px;
    height:14px;
    margin:2px 0 0;
  }

  .support-start-marker--goal{
    width:18px;
    height:18px;
    margin:0 0 0 -2px;
  }

  .support-start-copy p{
    max-width:none;
    margin-top:6px;
  }

  .support-section.support-enhanced .support-start-step::after{
    transform:scaleY(0);
  }

  .support-section.support-enhanced.is-visible .support-start-step--one::after,
  .support-section.support-enhanced.is-visible .support-start-step--two::after{
    transform:scaleY(1);
  }

  .support-section.support-enhanced .support-start-step::after{
    transform:none;
    transition:none;
  }

  .support-status.is-available .support-status-dot{
    animation:none;
  }
}

/* =========================================================
   fobi Web 1.1 · Support mobile normalization
   ========================================================= */
.support-label,
.support-onboarding-label{
  font-size:var(--fw-eyebrow-size);
  letter-spacing:var(--fw-eyebrow-tracking);
}

.support-avatar{
  overflow:hidden;
}

.support-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

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

  .support-label,
  .support-onboarding-label{
    font-size:var(--fw-eyebrow-size-mobile);
  }

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

  .support-people{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 16px;
  }

  .support-person{
    text-align:center;
  }

  .support-person .support-avatar{
    width:64px;
    height:64px;
    margin:0 auto 12px;
  }

  .support-person strong{
    font-size:.76rem;
    line-height:1.3;
  }

  .support-person p span{
    margin-top:4px;
    font-size:.68rem;
    line-height:1.35;
  }

  .support-team-text{
    max-width:34rem;
  }

  .support-status{
    width:auto;
    max-width:100%;
  }

  .support-onboarding{
    padding:26px var(--fw-card-pad-mobile) 28px;
    border-radius:var(--fw-radius-card);
  }
}

@media(max-width:374px){
  .support-person .support-avatar{
    width:58px;
    height:58px;
  }

  .support-person strong{
    font-size:.7rem;
  }

  .support-person p span{
    font-size:.64rem;
  }
}

/* Teamfotos: Browser-Interaktionen bewusst eingeschränkt */
.support-avatar img{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
}

/* Sascha Goas – besseres Framing im Avatar-Kreis */
.support-avatar--sascha img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
  transform: scale(1);
  transform-origin: center;
}

/* =========================================================
   Support Team · 4 Personen
   ========================================================= */

.support-avatar--dennis{
  background:var(--fw-surface-muted,#edf2f8);
  color:var(--fw-navy-700,#11316e);
}

.support-people{
  max-width:460px;
}

@media(max-width:1023px){
  .support-people{
    max-width:520px;
  }
}

@media(max-width:767px){
  .support-people{
    max-width:420px;
  }

  .support-person{
    text-align:left;
  }

  .support-person .support-avatar{
    margin:0 0 12px;
  }
}

@media(max-width:374px){
  .support-people{
    gap:20px 12px;
  }
}