*{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:'Archivo',system-ui,-apple-system,sans-serif;color:#19191C;background:#FFFFFF;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
    a{color:#0A22E0;text-decoration:none}
    a:hover{color:#0817A8}
    ::selection{background:#0A22E0;color:#fff}
    input,textarea,select,button{font-family:inherit}
    .disp{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;letter-spacing:-0.02em;line-height:0.98}
    @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
    @keyframes blobA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.12)}66%{transform:translate(-30px,20px) scale(0.94)}}
    @keyframes blobB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,30px) scale(1.15)}}
    @keyframes blobC{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(30px,40px) scale(0.9)}70%{transform:translate(-20px,-30px) scale(1.1)}}
    @keyframes bob1{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-18px) rotate(-2deg)}}
    @keyframes bob2{0%,100%{transform:translateY(0) rotate(7deg)}50%{transform:translateY(-24px) rotate(13deg)}}
    @keyframes spin{to{transform:rotate(360deg)}}
    @keyframes bob3{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(5deg)}}
    @keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(10,34,224,0.5)}70%{box-shadow:0 0 0 7px rgba(10,34,224,0)}100%{box-shadow:0 0 0 0 rgba(10,34,224,0)}}
    @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    .grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:0.03;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
    .card{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s cubic-bezier(.2,.7,.2,1);animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
    .card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(25,25,28,0.12)}
    .card .corner{position:absolute;top:0;right:0;width:120px;height:120px;transform:translate(38%,-38%) rotate(45deg);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
    .card:hover .corner{transform:translate(20%,-20%) rotate(45deg)}
    .card .cta{opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s;color:#0A22E0}
    .card:hover .cta{opacity:1;transform:none}
    #svcgrid .card:nth-child(1){animation-delay:.02s}
    #svcgrid .card:nth-child(2){animation-delay:.07s}
    #svcgrid .card:nth-child(3){animation-delay:.12s}
    #svcgrid .card:nth-child(4){animation-delay:.17s}
    #svcgrid .card:nth-child(5){animation-delay:.22s}
    #svcgrid .card:nth-child(6){animation-delay:.27s}
    #svcgrid .card:nth-child(7){animation-delay:.32s}
    #svcgrid .card:nth-child(8){animation-delay:.37s}
    .svc-line .bar{transition:height .35s cubic-bezier(.2,.7,.2,1)}
    .svc-line:hover .bar{height:64px}
    .svc-line .sname{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
    .svc-line:hover .sname{transform:translateX(10px)}
    @media (max-width:900px){
      .scrolly{height:auto !important}
      .drive-sec{height:auto !important;min-height:0 !important;display:block !important}
      .scrolly-trigger{display:none !important}
      .scrolly-frame{position:static !important;height:auto !important;overflow:visible !important;display:block !important}
      .scrolly-inner{padding:48px 22px !important}
      .scrolly-head{height:auto !important;margin-bottom:22px !important}
      .scrolly-chapter{position:relative !important;inset:auto !important;opacity:1 !important;transform:none !important;pointer-events:auto !important}
      .scrolly-chapter+.scrolly-chapter{margin-top:6px}
      .scrolly-cols{display:block !important}
      .scrolly-left{min-height:0 !important;height:auto !important;margin-bottom:8px}
      .scrolly-right{height:auto !important}
      .scrolly-left .scrolly-item{position:relative !important;inset:auto !important;opacity:1 !important;transform:none !important;margin-bottom:18px}
      .scrolly-left .scrolly-item>div{height:auto !important}
      .scrolly-left .accent-bar{display:none !important}
      .scrolly-right .scrolly-item{position:relative !important;inset:auto !important;opacity:1 !important;transform:none !important;height:300px !important;margin-bottom:18px}
      .scrolly-dots{display:none !important}
    }
    @media (max-width:820px){
      [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
      [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr 1fr !important}
      [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr !important}
      [style*="grid-template-columns:repeat(6,1fr)"]{grid-template-columns:repeat(3,1fr) !important}
      [style*="grid-template-columns:1.6fr 1fr 1fr 1fr"]{grid-template-columns:1fr 1fr !important}
      [style*="grid-template-columns:56px 0.85fr 1.15fr"]{grid-template-columns:1fr !important;gap:16px !important}
      [style*="grid-template-columns:0.8fr 1.2fr"]{grid-template-columns:1fr !important}
      [style*="max-width:1400px"]{padding-left:22px !important;padding-right:22px !important}
      [style*="max-width:1280px"]{padding-left:22px !important;padding-right:22px !important}
      header [style*="max-width:1400px"]{padding-top:12px !important;padding-bottom:12px !important}
      header nav{gap:16px !important}
      header img[alt="Stratolution"]{height:40px !important}
    }
    @media (max-width:520px){
      [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr 1fr !important}
      [style*="grid-template-columns:repeat(6,1fr)"]{grid-template-columns:repeat(2,1fr) !important}
      header nav{display:none !important}
    }

[hidden]{display:none !important}
.drive-tab{cursor:pointer;padding:20px 0 20px 24px;border-left:3px solid transparent;transition:opacity .3s ease,border-color .3s ease;opacity:.45}
.drive-tab.active{border-left-color:#0A22E0;opacity:1}
.drive-panel{position:absolute;inset:0;transition:opacity .4s ease,transform .4s ease;opacity:0;transform:translateY(14px) scale(.985);z-index:1;pointer-events:none}
.drive-panel.active{opacity:1;transform:none;z-index:2;pointer-events:auto}
.drive-bar{flex:1;height:3px;border-radius:2px;transition:background .4s ease;background:#E4E4E9}
.drive-bar.active{background:linear-gradient(90deg,#0A22E0,#8B5CF6)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
  html{scroll-behavior:auto}
}
/* Header "Beratung buchen" CTA: never wrap to two lines; stay compact on phones */
header [style*="justify-self:end"]{white-space:nowrap}
@media (max-width:640px){
  header [style*="justify-self:end"]{font-size:13px !important;padding:10px 15px !important;gap:6px !important;box-shadow:0 4px 12px rgba(10,34,224,0.25) !important}
}
/* Brand wall is a 7-column grid; the design's mobile CSS only collapses 3/4/6-col grids, so it overflows on phones. Collapse it too. */
@media (max-width:820px){
  [style*="grid-template-columns:repeat(7,1fr)"]{grid-template-columns:repeat(3,1fr) !important}
}
@media (max-width:520px){
  [style*="grid-template-columns:repeat(7,1fr)"]{grid-template-columns:repeat(2,1fr) !important}
}
/* "So entsteht Ihre Plattform" 3-step slider: the scroll/click slide can't work on touch,
   so on mobile show every step and every panel stacked and fully visible, instead of the
   greyed-out single-panel desktop state. (The design's own mobile rules target old class
   names that this build no longer emits.) */
@media (max-width:900px){
  .drive-sec{min-height:0 !important;display:block !important}
  .drive-sec [style*="flex-wrap:wrap"]{flex-direction:column !important;align-items:stretch !important}
  .drive-tab{opacity:1 !important;cursor:default}
  [style*="aspect-ratio:16/10.5"]{aspect-ratio:auto !important;max-height:none !important;height:auto !important}
  .drive-panel{position:relative !important;opacity:1 !important;transform:none !important;height:280px !important;margin-bottom:14px}
  .drive-bar{display:none !important}
}

.hv0:hover{color:#fff !important}
.hv1:hover{color:#C7C7CF !important}
.hv2:hover{color:#2DE2E6 !important}
.hv3:hover{background:#fff !important;border-color:#fff !important}
.hv4:hover{background:#EAF6F7 !important;color:#0A0E1A !important}
.hv5:hover{background:#2DE2E6 !important;color:#0A0E1A !important}
.hv6:hover{background:#19191C !important}
.hv7:hover{background:#19191C !important;color:#fff !important}
.hv8:hover{color:#0817A8 !important}
.hv9:hover{border-color:#DADCF5 !important;box-shadow:0 12px 26px rgba(25,25,28,0.07) !important}
.hv10:hover{filter:none !important;opacity:1 !important}
.hv11:hover{opacity:1 !important}
.hv12:hover{color:#0A22E0 !important}