/* Marketing Schmiede · Startseite v2503 – 3D-Hero, Referenzen, Team. Gilt nur auf der Startseite. */

/* Sprungziele für alte Direktlinks */
.ms-anchor-alias{display:block;width:0;height:0;overflow:hidden;pointer-events:none;scroll-margin-top:118px}

/* Während der 3D-Hero läuft, hat er eigene Buttons (Beratung, WhatsApp) und Kapitel-Navigation:
   die schwebenden Bedienelemente der Seite treten so lange zurück und kommen danach wieder */
html.msh-pinned:not(.msh-past) .ms-wa-fab,
html.msh-pinned:not(.msh-past) .to-top{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
html.msh-pinned:not(.msh-past) .sticky-mobile{opacity:0!important;transform:translateY(120%)!important;pointer-events:none!important}

/* Referenzen: Bildunterschrift läuft nie unter das kleine Projektbild */
.msr__card figcaption{padding-right:92px}

/* Hinweis zur 3D-Darstellung im Fußbereich */
.msu-footer .ms-home-note{width:min(1180px,calc(100% - 40px));max-width:none!important;margin:18px auto 0!important;padding:0!important;font-size:10.5px!important;line-height:1.55!important;letter-spacing:0!important;text-align:center!important;color:rgba(255,255,255,.5)!important}

/* ===================== Übergang 3D-Hero → Logo-Referenzen ===================== */
#nach-hero>.ms-seam{position:absolute!important;inset:0 0 auto 0;height:clamp(54px,7vw,96px);z-index:1!important;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,11,9,.94) 0%,rgba(14,11,9,.5) 42%,rgba(14,11,9,0) 100%)}
#nach-hero>.ms-seam::after{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,rgba(215,182,112,0),rgba(215,182,112,.55) 50%,rgba(215,182,112,0))}
#nach-hero{border-top-color:transparent!important}

/* ===================== Team ===================== */
#team .mst{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,40px);max-width:1180px;margin:clamp(30px,4vw,52px) auto 0}
#team .mst::before{content:"";position:absolute;left:50%;top:-6%;width:min(980px,100%);height:70%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(215,182,112,.16),rgba(215,182,112,0));filter:blur(10px)}
#team .mst-card{--rx:0deg;--ry:0deg;--ty:0px;position:relative;display:flex;flex-direction:column;min-width:0;border-radius:28px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#0b0a11 0%,#100f1a 58%,#14112a 100%);
  border:1px solid rgba(215,182,112,.24);
  box-shadow:0 40px 90px -34px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.03) inset,0 1px 0 rgba(255,255,255,.07) inset;
  transform:perspective(1200px) translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .6s cubic-bezier(.16,1,.3,1),border-color .5s ease,box-shadow .5s ease,opacity .9s ease}
#team .mst-card::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%),rgba(241,220,164,.13),rgba(241,220,164,0) 46%)}
#team .mst-media{position:relative;aspect-ratio:1/.9;overflow:hidden;background:#000}
#team .mst-media img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:50% 16%;transform:scale(1.001);transition:transform 1.4s cubic-bezier(.16,1,.3,1);filter:saturate(1.02) contrast(1.03)}
#team .mst-media--shaanu img{object-position:50% 10%}
#team .mst-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 18%,rgba(215,182,112,.16),rgba(215,182,112,0) 70%);mix-blend-mode:screen}
#team .mst-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,10,17,0) 38%,rgba(11,10,17,.55) 64%,rgba(11,10,17,.94) 88%,#0b0a11 100%)}
#team .mst-no{position:absolute;left:24px;top:22px;z-index:2;display:flex;align-items:center;gap:10px;
  font:800 13px/1 "League Spartan",Arial,sans-serif;letter-spacing:.22em;color:#D7B670}
#team .mst-no::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,#D7B670,rgba(215,182,112,0))}
#team .mst-badge{position:absolute;right:20px;top:18px;z-index:2;padding:9px 14px;border-radius:999px;
  font:700 10.5px/1 Montserrat,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#F4EFE6;
  background:rgba(12,11,18,.55);border:1px solid rgba(215,182,112,.38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#team .mst-name{position:absolute;left:clamp(20px,2.4vw,30px);right:20px;bottom:clamp(14px,2vw,22px);z-index:2;margin:0!important;
  font-family:"League Spartan",Arial,sans-serif!important;font-weight:800!important;font-size:clamp(40px,4.6vw,72px)!important;
  line-height:.86!important;letter-spacing:-.035em!important;text-transform:uppercase!important;text-align:left!important;color:#fff!important;text-wrap:wrap!important}
#team .mst-name a{color:inherit!important;text-decoration:none!important}
#team .mst-name span{display:block}
#team .mst-first{color:#fff!important}
#team .mst-last{background:linear-gradient(180deg,#F6E2AE 0%,#D7B670 55%,#B48C45 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}
#team .mst-body{display:flex;flex-direction:column;gap:14px;flex:1;padding:clamp(18px,2.2vw,28px) clamp(20px,2.4vw,32px) clamp(24px,2.6vw,32px)}
#team .mst-body .mst-cred{margin:0!important;font:700 11px/1.4 Montserrat,Arial,sans-serif!important;letter-spacing:.16em!important;text-transform:uppercase;color:#D7B670!important}
#team .mst-body .mst-text{margin:0!important;font:500 15px/1.68 Montserrat,Arial,sans-serif!important;letter-spacing:0!important;color:rgba(244,239,230,.8)!important;max-width:54ch}
#team .mst-tags{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0!important;padding:0!important;list-style:none!important}
#team .mst-tags li{margin:0!important;padding:8px 12px!important;border-radius:999px;border:1px solid rgba(215,182,112,.3);background:rgba(255,255,255,.035);
  font:700 10.5px/1 Montserrat,Arial,sans-serif!important;letter-spacing:.1em!important;text-transform:uppercase;color:#F4EFE6!important}
#team .mst-tags li::before,#team .mst-tags li::marker{content:none!important}
#team .mst-more{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding-top:6px;
  font:700 13px/1.2 Montserrat,Arial,sans-serif;color:#fff!important;text-decoration:none!important;border-bottom:1px solid rgba(215,182,112,.5);padding-bottom:4px}
#team .mst-more span{color:#D7B670;transition:transform .35s cubic-bezier(.16,1,.3,1)}
#team .mst-more:hover span,#team .mst-more:focus-visible span{transform:translateX(4px)}
#team .mst-promise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1180px;margin:clamp(26px,3.4vw,44px) auto 0;border-radius:24px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid rgba(215,182,112,.2)}
#team .mst-p{position:relative;display:grid;gap:8px;align-content:start;padding:clamp(20px,2.4vw,30px)}
#team .mst-p+.mst-p{border-left:1px solid rgba(215,182,112,.16)}
#team .mst-p i{font:800 26px/1 "League Spartan",Arial,sans-serif;font-style:normal;letter-spacing:-.02em;
  background:linear-gradient(180deg,#F6E2AE,#B48C45);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
#team .mst-p b{display:block;font:800 16px/1.25 Montserrat,Arial,sans-serif;color:#fff!important}
#team .mst-p span{display:block;font:500 13.5px/1.6 Montserrat,Arial,sans-serif;color:rgba(244,239,230,.72)!important}
#team .mst-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;margin:clamp(26px,3vw,38px) auto 0}
#team .mst-cta .btn{margin:0}
#team .mst-link{display:inline-flex;align-items:center;gap:8px;font:700 13px/1.2 Montserrat,Arial,sans-serif;color:#fff!important;text-decoration:none!important;border-bottom:1px solid rgba(215,182,112,.5);padding-bottom:4px}
#team .mst-link span{color:#D7B670}

/* Einblenden beim Erreichen (nur mit Skript, ohne „Bewegung reduzieren“) */
#team .mst.mst-anim .mst-card{opacity:0;--ty:38px}
#team .mst.mst-anim .mst-card.mst-in{opacity:1;--ty:0px;transition-delay:calc(var(--d,0) * 140ms)}
#team .mst.mst-anim .mst-card.mst-in.mst-done{transition-delay:0s}

/* Zeiger-Effekte nur auf Geräten mit Maus */
@media (hover:hover) and (pointer:fine){
  #team .mst-card:hover{border-color:rgba(215,182,112,.55);box-shadow:0 50px 110px -34px rgba(0,0,0,.9),0 0 0 1px rgba(215,182,112,.2) inset,0 0 60px -20px rgba(215,182,112,.35)}
  #team .mst-card:hover::after{opacity:1}
  #team .mst-card:hover .mst-media img{transform:scale(1.045)}
}
@media (max-width:1099px){
  #team .mst-media{aspect-ratio:4/4.3}
  #team .mst-name{font-size:clamp(34px,5.4vw,56px)!important}
  #team .mst-body .mst-text{font-size:14.5px!important}
}
@media (max-width:899px){
  #team .mst-promise{grid-template-columns:1fr}
  #team .mst-p+.mst-p{border-left:0;border-top:1px solid rgba(215,182,112,.16)}
  #team .mst-p{grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px}
  #team .mst-p i{grid-row:span 2;font-size:24px;padding-top:2px}
}
@media (max-width:699px){
  #team .mst{grid-template-columns:1fr;gap:18px}
  #team .mst-card{border-radius:24px}
  #team .mst-media{aspect-ratio:1/.98}
  #team .mst-name{font-size:clamp(38px,12vw,52px)!important}
  #team .mst-no{left:18px;top:18px}
  #team .mst-badge{right:14px;top:14px;padding:8px 11px;font-size:9.5px}
  #team .mst-body .mst-text{font-size:14.5px!important;line-height:1.62!important}
  #team .mst-cta{flex-direction:column;gap:16px}
  #team .mst-cta .btn{width:100%;justify-content:center;text-align:center}
}
@media (max-width:420px){
  #team .team-head h2{font-size:7.1vw!important}
}

/* ===================== Kleine Bildschirme: nichts läuft aus dem Bild ===================== */
/* Weiche Trennstellen (&shy;) in langen Wörtern greifen nur auf schmalen Handys – darüber bleibt alles wie bisher */
#proof-brands h2,#faq h2,#geld-zurueck-garantie p,#kundenstimmen .msr__card figcaption b{hyphens:none}
@media (max-width:480px){
  #proof-brands h2,#faq h2,#geld-zurueck-garantie p,#kundenstimmen .msr__card figcaption b{hyphens:manual!important}
  main>section:not(#ms3d) :is(h2,h3){overflow-wrap:break-word!important}
  main>section:not(#ms3d) :is(p,li,figcaption,b,strong,blockquote){overflow-wrap:break-word}
}

/* Referenzen → Formular: direkt anschließen (wie zuvor nach den Leistungskarten) */
body.meta-home #kundenstimmen ~ #kontakt.v202-section{padding-top:24px!important}
@media (max-width:380px){
  #kundenstimmen .msr__card .fmtst-thumb{width:60px;height:60px;right:12px;bottom:12px}
  #kundenstimmen .msr__card figcaption{padding-right:76px}
}
@media (prefers-reduced-motion:reduce){
  #team .mst-card,#team .mst-media img,#team .mst-card::after{transition:none!important}
  #team .mst.mst-anim .mst-card{opacity:1!important;--ty:0px!important}
}

/* Deko-Kreise: genau wie bisher (Platzhalter unsichtbar; Rechner behält seinen Kreis rechts) */
.ms-orbit-decor.ms-orbit-off{display:none!important}
.msu-page main>section#roi-rechner>.ms-orbit-decor{left:auto;right:clamp(-300px,-14vw,-100px);transform:translateY(-50%)}

.fmtst-thumb{-webkit-tap-highlight-color:transparent}
.msr__card.fm-open .fmtst-thumb{position:absolute;left:9px;top:9px;width:calc(100% - 18px);height:calc(100% - 18px);object-fit:contain;border-radius:14px;background:radial-gradient(circle at 30% 18%,#241d3f,#0f0d1e);box-shadow:0 26px 60px rgba(18,19,35,.55),0 0 0 2px rgba(217,185,121,.9);cursor:zoom-out;z-index:3;animation:fmZoomIn .3s cubic-bezier(.22,1,.36,1)}
@keyframes fmZoomIn{from{opacity:0;transform:scale(.84)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.fm-scrollhint,.fm-scrollhint i,.msr__card.fm-open .fmtst-thumb{animation:none!important}}
@media(max-width:680px){.msr__card figcaption{padding-right:96px}}
.msr__card{position:relative;overflow:hidden}
.msr__card>*:not(.fmtst):not(.fmtst-thumb){position:relative;z-index:1}
.fmtst{position:absolute;inset:0;pointer-events:none;z-index:0}
.fmtst-ghost{position:absolute;inset:-7%;background-size:cover;background-position:center;opacity:0;transform:scale(1.05);transition:opacity .9s ease,transform 7s ease;filter:blur(4px) saturate(1.05)}
.fmtst::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.94) 55%,rgba(255,255,255,.82))}
.msr__card:hover .fmtst-ghost,.msr__card.fm-inview .fmtst-ghost{opacity:1;transform:scale(1.16) translateY(-2%)}
.fmtst-thumb{position:absolute;right:14px;bottom:14px;width:74px;height:74px;object-fit:cover;border-radius:12px;border:2px solid #fff;box-shadow:0 8px 22px rgba(18,19,35,.3),0 0 0 1.5px rgba(217,185,121,.7);z-index:2;cursor:zoom-in;transition:transform .35s ease,box-shadow .35s ease;transform-origin:bottom right}
.msr__card:not(.fm-open):hover .fmtst-thumb{transform:scale(1.16);box-shadow:0 12px 30px rgba(18,19,35,.4),0 0 0 2px rgba(217,185,121,.95)}
@media(prefers-reduced-motion:reduce){.fmtst-ghost,.fmtst-thumb{transition:none!important}}
