:root{--ease-io:cubic-bezier(.65,0,.35,1);--ease-out:cubic-bezier(.22,1,.36,1);--ease-expo:cubic-bezier(.19,1,.22,1);--ease-back:cubic-bezier(.34,1.56,.64,1);--sy-yellow:#fee502;--sy-ink:#1a1a1a}
html{scroll-behavior:auto}
/* nichts darf seitlich ueberstehen (mobil liess sich die Seite sonst seitlich ziehen) */
html,body{overflow-x:clip}
.video_wrap{overflow:clip}

/* --- legacy IX2 scroll fades are replaced by the vanilla system below --- */
html.js .section_title-wrapper[data-w-id],html.js .video_wrap[data-w-id],html.js .heading_h4[data-w-id],html.js .grid_cover[data-w-id],
html.js .comparison_grid[data-w-id],html.js .comparison_banner[data-w-id],html.js .review_flex[data-w-id],html.js .heading_h1[data-w-id],
html.js .path_points-flex[data-w-id],html.js .flex_center[data-w-id],html.js .footer_title[data-w-id],html.js .column-inner[data-w-id],
html.js .footer_column[data-w-id],html.js .footer_lower[data-w-id]{opacity:1!important;transform:none!important}
html.js .service_card{opacity:1!important;transform:none!important}
/* logo grid: IX2 per-card fades replaced by one quick stagger */
html.js .partner_card.sy-r,html.js .trust_card.sy-r,html.js .trust_quote-card.sy-r{opacity:0!important;transform:translate3d(0,1.25em,0)!important}
html.js .partner_card.sy-r.is-inview,html.js .trust_card.sy-r.is-inview,html.js .trust_quote-card.sy-r.is-inview{opacity:1!important;transform:none!important}

/* --- Navigation: slide away on scroll down, back on scroll up --- */
.navigation{transition:transform .7s var(--ease-io),border-color .4s var(--ease-io),background-color .4s var(--ease-io)!important;will-change:transform}
.navigation{transform:translate3d(0,0,0)!important}
.navigation.is-nav-hidden{transform:translate3d(0,-105%,0)!important}
.dropdown_icon{transition:transform .45s var(--ease-io)}
.dropdown_list.w--open .dropdown_link{animation:sy-fade-up .7s var(--ease-out) both;animation-delay:calc(.05s + var(--i,0)*.035s)}
.dropdown_link{transition:background-color .35s var(--ease-io)!important}
.dropdown_icon-link{transition:background-color .35s var(--ease-io)}
.dropdown-icon-28px{transition:transform .45s var(--ease-out)}
.dropdown_link:hover .dropdown_icon-link{background-color:var(--sy-yellow)}
.dropdown_link:hover .dropdown-icon-28px{transform:translate3d(.3em,0,0)}

/* --- Buttons: colour wipe, press feel --- */
.button_primary,.button_secondary{position:relative;overflow:hidden;isolation:isolate;transition:color .5s var(--ease-io),border-color .5s var(--ease-io),transform .35s var(--ease-io)!important}
.button_primary::before,.button_secondary::before{content:'';position:absolute;left:0;top:0;right:0;bottom:0;z-index:-1;pointer-events:none;transform:scaleY(0);transform-origin:50% 0;transition:transform .55s var(--ease-io)}
.button_primary::before{background:var(--sy-yellow)}
.button_secondary::before{background:var(--sy-ink)}
.button_primary:hover{color:var(--sy-ink)!important}
.button_secondary:hover{color:#fff!important;border-color:var(--sy-ink)!important}
.button_primary:hover::before,.button_secondary:hover::before{transform:scaleY(1);transform-origin:50% 100%}
.section_footer .button_secondary::before{background:#fff}
.section_footer .button_secondary:hover{color:var(--sy-ink)!important;border-color:#fff!important}
.button_primary:active,.button_secondary:active{transform:scale(.97)}

/* --- Text links: underline sweep --- */
.link-16px,.footer_link{position:relative}
.link-16px::after,.footer_link::after{content:'';position:absolute;left:0;right:0;bottom:-.15em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .6s var(--ease-io);pointer-events:none}
.link-16px:hover::after,.footer_link:hover::after{transform:scaleX(1);transform-origin:0 50%}
.social_link{transition:transform .45s var(--ease-out),opacity .35s var(--ease-io)}
.social_link:hover{transform:translate3d(0,-.2em,0)}

/* --- Logos / cards hover --- */
.trust_logo,.partner-logo{transition:transform .6s var(--ease-out),filter .5s var(--ease-io),opacity .5s var(--ease-io)}
.trust_card:hover .trust_logo,.partner_card:hover .partner-logo{transform:scale(1.06)}
.comparison_card{transition:background-color .5s var(--ease-io)}
.comparison_card .tag{transition:background-color .45s var(--ease-io),transform .45s var(--ease-out)}
.comparison_card:hover .tag{background-color:var(--sy-yellow);transform:translate3d(0,-.15em,0)}
.path_point .icon-32px{transition:transform .6s var(--ease-back)}
.path_point:hover .icon-32px{transform:scale(1.12) rotate(-6deg)}
.play_icon-wrap{transition:transform .6s var(--ease-out)}
.video_wrap:hover .play_icon-wrap{transform:scale(1.08)}

/* --- Scroll reveal: blocks --- */
html.js .sy-r{opacity:0;transform:translate3d(0,1.25em,0);transition:opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out);transition-delay:var(--d,0ms)}
html.js .sy-r.is-inview{opacity:1;transform:none}
html.js .sy-r.sy-r-fast{transition-duration:.85s,.95s}
/* headlines: lines rise out of a mask */
html.js .sy-split{opacity:1;transform:none;transition:none}
.sy-line{display:block;overflow:hidden;padding:.1em 0 .16em;margin:-.1em 0 -.16em}
.sy-line-in{display:block;transform:translate3d(0,120%,0);transition:transform 1.25s var(--ease-expo);transition-delay:calc(var(--d,0ms) + var(--l,0)*110ms)}
.is-inview .sy-line-in{transform:none}
.sy-nomotion,.sy-nomotion *{transition:none!important}
/* media: wipe open + settle */
html.js .video_wrap.sy-m{clip-path:inset(10% 6% 0 6%);transition:clip-path 1.6s var(--ease-io)}
html.js .video_wrap.sy-m.is-inview{clip-path:inset(0 0 0 0)}
html.js .video_wrap.sy-m .image.is_cover{transform:scale(1.14);transition:transform 2.2s var(--ease-out),opacity .4s ease}
html.js .video_wrap.sy-m.is-inview .image.is_cover{transform:none}
html.js .video_wrap.sy-m .play_wrap{opacity:0;transform:translate3d(0,1em,0);transition:opacity 1s var(--ease-out) .7s,transform 1.2s var(--ease-out) .7s}
html.js .video_wrap.sy-m.is-inview .play_wrap{opacity:1;transform:none}
/* decorative lines draw themselves */
html.js .sy-lx{clip-path:inset(0 100% 0 0);transition:clip-path 1.8s var(--ease-io);transition-delay:var(--d,0ms)}
html.js .sy-ly{clip-path:inset(0 0 100% 0);transition:clip-path 1.8s var(--ease-io);transition-delay:var(--d,0ms)}
html.js .sy-lx.is-inview,html.js .sy-ly.is-inview{clip-path:inset(0 0 0 0)}

/* --- Hero: show the first scene of the map animation right away (no empty map while it loads) --- */
html.js .map_lottie-wrapper{opacity:0;transition:opacity .7s var(--ease-out)}
html.js .map_lottie-wrapper.is-scene-ready{opacity:1}

.sy-logo-inline{display:inline-block;height:.92em;vertical-align:-.23em;margin-left:.12em}
.sy-logo-inline svg{display:block;height:100%;width:auto}

/* --- Produkte: Bild und Text abwechselnd links/rechts (Desktop) --- */
@media (min-width:992px){
  /* Ueberschrift und Text als Block, vertikal mittig, fester Abstand statt grosser Luecke */
  .section_world .service_card-title{justify-content:center!important;gap:clamp(1.5rem,2.2vw,2.75rem)}
  /* gespiegelte Kacheln: Abstand zum rechten Kachelrand wie links bei den anderen */
  .section_world .service_card:nth-child(even){padding-left:0!important;padding-right:clamp(2.5rem,3.4vw,4rem)!important}
  .section_world .service_card:nth-child(even){flex-direction:row-reverse}
  .section_world .service_card:nth-child(even) .light_absolute{left:auto;right:0;transform:scaleX(-1)}
  /* gespiegelte Kacheln: Bildkante zur Textseite weich in den grauen Verlauf auslaufen lassen */
  .section_world .service_card:nth-child(even) .service_image{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 24%),linear-gradient(to top,transparent 0,#000 9%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to left,transparent 0,#000 24%),linear-gradient(to top,transparent 0,#000 9%);mask-composite:intersect}
}

/* --- Vergleich: alle senkrechten Linien in derselben Farbe --- */
.section_comparison .border_absolute{border-left-color:rgba(31,29,30,.15)!important}

/* --- Hero-Tabs: klickbar, Zustand per Klasse statt IX2 --- */
.hero_tab.sy-tab{cursor:pointer;background-color:transparent!important;color:#1a1a1a!important;transition:background-color .55s var(--ease-io),color .55s var(--ease-io)}
.hero_tab.sy-tab .tab_digit-wrap{background-color:transparent!important;transition:background-color .55s var(--ease-io)}
.hero_tab.sy-tab:hover{background-color:rgba(26,26,26,.06)!important}
.hero_tab.sy-tab.sy-on{background-color:#000!important;color:#fff!important}
.hero_tab.sy-tab.sy-on .tab_digit-wrap{background-color:#fff!important}
.hero_tab.sy-tab:focus-visible{outline:1px solid #1a1a1a;outline-offset:2px}

/* --- Hero mobil: Headline, Adresse, Erklaertext, CTA, dann Animation, Tabs direkt unter den Datenkarten --- */
@media (max-width:767px){
  /* weniger Luft zwischen Navigation und Headline */
  .section_hero-home .padding_vertical.is-hero{padding-top:6.75rem!important}
  .section_hero-home .section_title-wrapper.is_hero{display:contents}
  .section_hero-home .title_upper-wrap{order:1}
  .section_hero-home .title_lower{order:2;margin-top:-1.1rem}
  .section_hero-home .map_lottie-wrapper.is-mbl.sy-hero-moved{order:3;margin-inline:calc(50% - 50vw);width:100vw;margin-top:-.5rem;margin-bottom:-3.1rem}
  /* Tabs sitzen direkt unter der untersten Kartenreihe; zeigt die Animation nur 2 Reihen (Bewerten, Entwerfen), rutschen sie mit nach oben */
  .section_hero-home .hero_tabs{order:4;margin-top:0;position:relative;z-index:2;transition:transform .8s var(--ease-io)}
  .section_hero-home .hero_tabs.sy-up{transform:translate3d(0,-20vw,0)}
}


/* --- Product visuals (built from the Figma layers by JS, desktop only) --- */
.pv{display:none}
@media (min-width:992px){
  .service_image{position:relative}
  .pv{display:block;position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;perspective:1800px;perspective-origin:50% 50%}
  .service_image .image.is-desktop{transition:opacity .5s var(--ease-io)}
  .service_image.is-pv-ready .image.is-desktop{opacity:0}
  .pv_stage{position:absolute;left:0;top:0;width:100%;height:100%;will-change:transform}
  .pv_l{position:absolute}
  .pv_l>img{display:block;width:100%;height:100%;max-width:none}
  /* entrance states */
  /* base takes over from the flat image as soon as it is decoded (same pixels, never empty); the parts build once the visual is really on screen */
  .pv_l.is-base>img{opacity:0;transition:opacity .5s var(--ease-io)}
  .is-pv-ready .pv_l.is-base>img{opacity:1}
  .pv_l.is-overlay>img{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease-io) .4s}
  .pv_l.is-line>img{transition:clip-path 1.1s var(--ease-io);transition-delay:var(--dl,1s)}
  .pv_l.is-line.is-h>img{clip-path:inset(0 100% 0 0)}
  .pv_l.is-line.is-v>img{clip-path:inset(0 0 100% 0)}
  .pv_l.is-panel>img{opacity:0;transform:translate3d(0,1.8em,0) scale(.97);transform-origin:50% 100%;transition:opacity .8s var(--ease-out),transform 1.3s var(--ease-expo);transition-delay:var(--dl,.3s)}
  .pv_l.is-cursor>img{opacity:0;transform:translate3d(3em,2.2em,0) rotate(-8deg);transition:opacity .8s var(--ease-out),transform 1.4s var(--ease-expo);transition-delay:var(--dl,1.4s)}
  .pv_l.is-dots i{position:absolute;display:block;border-radius:50%;background:#fea802;transform:scale(0);transition:transform .8s var(--ease-back);transition-delay:calc(.35s + var(--i,0)*22ms)}
  .pv_l.is-dots i::after{content:'';position:absolute;left:-150%;top:-150%;width:400%;height:400%;border-radius:50%;border:1px solid #fea802;opacity:0;transform:scale(.25)}
  .pv_l.is-dots i.is-ping::after{animation:sy-ping 1.6s var(--ease-out) both}
  .is-pv-in .pv_l.is-overlay>img,.is-pv-in .pv_l.is-line>img{clip-path:inset(0 0 0 0)}
  .is-pv-in .pv_l.is-panel>img{opacity:1;transform:none}
  .is-pv-in .pv_l.is-cursor>img{opacity:1;transform:none}
  .is-pv-in .pv_l.is-cursor.is-click>img{animation:sy-click .5s var(--ease-io)}
  .is-pv-in .pv_l.is-dots i{transform:scale(1)}
}
@media (max-width:991px){
  html.js .service_image.sy-pvm{opacity:0;transform:translate3d(0,2em,0) scale(.97);transition:opacity 1.2s var(--ease-out),transform 1.4s var(--ease-expo)}
  html.js .service_image.sy-pvm.is-pv-in{opacity:1;transform:none}
}

/* --- Vergleich mobil: Swipe-Zeitstrahl (duplizierte Sektion .section_comparison.is-swipe) --- */
.section_comparison.is-swipe{display:none}
@media (max-width:767px){
  .section_comparison:not(.is-swipe){display:none}
  .section_comparison.is-swipe{display:block;overflow:hidden}
  .cmp-swipe{position:relative;display:flex;flex-direction:column;gap:1.25rem;margin-top:2rem;width:100%;min-width:0;max-width:100%;align-self:stretch}
  .cmp-swipe_track{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(50% - 50vw);padding:.25rem 1.25rem .5rem;scroll-padding-inline:1.25rem;overscroll-behavior-x:contain}
  .cmp-swipe_track::-webkit-scrollbar{display:none}
  .cmp-swipe_card.comparison_card{flex:0 0 74vw;max-width:20rem;min-height:13.5rem;scroll-snap-align:start;scroll-snap-stop:always;
    display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;padding:1.5rem 1.25rem;border:1px solid #dcdcdc;background:#fff;position:relative;
    opacity:.42;transform:scale(.94);transform-origin:0 50%;transition:opacity .6s var(--ease-out),transform .8s var(--ease-expo),border-color .5s var(--ease-io)}
  .cmp-swipe_card.is-active{opacity:1;transform:none;border-color:#1a1a1a}
  .cmp-swipe_card .border_absolute{display:none}
  .cmp-swipe_card .lines_card{position:static;width:100%;height:2.75rem;object-fit:cover;opacity:.8}
  .cmp-swipe_card .tag{align-self:stretch;text-align:center;transition:background-color .5s var(--ease-io),transform .6s var(--ease-back)}
  .cmp-swipe_card.is-active .tag{background-color:var(--sy-yellow);transform:translate3d(0,-.2em,0)}
  .cmp-swipe_end{flex:0 0 calc(100vw - 74vw - 2.5rem)}
  .cmp-swipe_nav{display:flex;align-items:center;justify-content:space-between}
  .cmp-swipe_dots{display:flex;gap:.375rem}
  .cmp-swipe_dot{width:.5rem;height:.5rem;border-radius:1rem;background:#d6d6d3;transition:width .5s var(--ease-expo),background-color .4s var(--ease-io);cursor:pointer}
  .cmp-swipe_dot.is-active{width:1.5rem;background:#1a1a1a}
  .cmp-swipe_hint{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#6b6b6b;transition:opacity .5s var(--ease-io)}
  .cmp-swipe_hint::after{content:'';width:1.5rem;height:1px;background:currentColor;box-shadow:0 0 0 0 transparent;
    -webkit-mask:linear-gradient(90deg,#000 70%,transparent);animation:sy-hint 1.6s var(--ease-io) infinite}
  .cmp-swipe.is-touched .cmp-swipe_hint{opacity:0}
  /* "Ohne syte": laeuft mit, jede Phase fuellt ihren Abschnitt */
  .cmp-swipe_meter{padding:1.25rem;background:#e6e6e6;display:flex;flex-direction:column;gap:.875rem}
  .cmp-swipe_head,.cmp-swipe_foot{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
  .cmp-swipe_label{margin:0}
  .cmp-swipe_days{white-space:nowrap}
  .cmp-swipe_num{display:inline-block;min-width:1.2em;text-align:right;font-variant-numeric:tabular-nums}
  .cmp-swipe_bar{display:flex;gap:3px;height:.625rem}
  .cmp-swipe_seg{position:relative;flex:var(--w,1) 1 0;background:repeating-linear-gradient(135deg,#cfcfcc 0 1px,transparent 1px 5px);overflow:hidden}
  .cmp-swipe_seg::after{content:'';position:absolute;inset:0;background:#1a1a1a;transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease-expo),background-color .4s var(--ease-io)}
  .cmp-swipe_seg.is-done::after{transform:scaleX(1)}
  .cmp-swipe_seg.is-now::after{transform:scaleX(1);background:var(--sy-yellow)}
  .cmp-swipe_foot{font-size:.875rem;color:#4a4a4a}
  .cmp-swipe_cost{font-variant-numeric:tabular-nums}
  .cmp-swipe_risk{opacity:.35;transition:opacity .5s var(--ease-io)}
  .cmp-swipe.is-risk .cmp-swipe_risk{opacity:1}
  /* syte: kommt rein, sobald der Weg ohne syte durch ist */
  .cmp-swipe_syte{display:flex;align-items:center;justify-content:center;gap:.625rem;padding:1.125rem 1rem;background:var(--sy-yellow);
    clip-path:inset(0 0 100% 0);transform:translate3d(0,1rem,0);transition:clip-path .9s var(--ease-expo),transform .9s var(--ease-expo)}
  .cmp-swipe.is-done .cmp-swipe_syte{clip-path:inset(0 0 0 0);transform:none}
  .cmp-swipe_syte .heading_h4{white-space:nowrap}
  .cmp-swipe_logo{width:3.5rem;font-weight:600}
  .cmp-swipe_logo svg{display:block;width:100%;height:auto}
}

/* --- keyframes --- */
@keyframes sy-fade-up{from{opacity:0;transform:translate3d(0,.6em,0)}to{opacity:1;transform:none}}
@keyframes sy-ping{0%{opacity:.7;transform:scale(.25)}100%{opacity:0;transform:scale(1)}}
@keyframes sy-hint{0%,100%{transform:translateX(0)}50%{transform:translateX(.35rem)}}
@keyframes sy-click{0%{transform:none}40%{transform:scale(.82)}100%{transform:none}}