/* Schweizer Baupraxis KI 1.3.99o: öffentliche Website */
html,body,button,input,select,textarea,table,option{
  font-family:Calibri,"Carlito","Segoe UI",Arial,sans-serif!important;
}

/* Schweizer Baupraxis KI 1.3.99p:
   H1/H2 bleiben jederzeit vollständig dunkel sichtbar.
   Nur ein schmaler roter Akzent läuft durch die Schrift. */
@keyframes sbp-heading-red-wave{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}
body h1,body h2{
  color:#17191b;
  background-image:linear-gradient(105deg,
    #17191b 0%,
    #17191b 45%,
    #df2734 48.5%,
    #ef2435 50%,
    #df2734 51.5%,
    #17191b 55%,
    #17191b 100%);
  background-size:300% 100%;
  background-repeat:repeat-x;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:sbp-heading-red-wave 11s linear infinite;
}
@media (prefers-reduced-motion:reduce){
  body h1,body h2{animation:none;background-position:50% 50%}
}

/* Einheitlicher Footer auf jeder öffentlichen Seite */
.sbp-global-footer{
  border-top:1px solid #e4e6e8;
  background:#fff;
  color:#565d62;
  padding:42px 28px 20px;
  font-size:14px;
}
.sbp-global-footer-inner{width:min(1180px,100%);margin:0 auto}
.sbp-global-footer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px}
.sbp-global-footer h3{
  margin:0 0 13px;
  font-size:15px;
  color:#17191b;
  background:none!important;
  -webkit-text-fill-color:currentColor!important;
  animation:none!important;
}
.sbp-global-footer a{display:block;color:#565d62;text-decoration:none;margin:8px 0;line-height:1.35}
.sbp-global-footer a:hover{color:#ef2435}
.sbp-global-footer-bottom{margin-top:32px;padding-top:18px;border-top:1px solid #eceeef;font-size:12px;color:#777f84}
@media(max-width:760px){
  .sbp-global-footer{padding:34px 14px 18px}
  .sbp-global-footer-grid{grid-template-columns:1fr 1fr;gap:26px}
}
@media(max-width:460px){.sbp-global-footer-grid{grid-template-columns:1fr}}

/* Public mobile menu */
.sbp-public-menu-toggle{display:none}

@media(max-width:768px){
  header.sbp-global-header .wrap{position:relative}
  header.sbp-global-header .navlinks{display:none!important;position:absolute;top:100%;left:0;right:0;z-index:20000;background:#fff;padding:10px;border:1px solid #ddd;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
  header.sbp-global-header .navlinks.sbp-mobile-open{display:flex!important;flex-direction:column;gap:4px}
  header.sbp-global-header .navlinks a{display:block!important;width:100%;box-sizing:border-box;padding:11px 12px}
  .sbp-public-menu-toggle{display:flex;width:42px;height:42px;padding:9px;border:0;background:transparent;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer}
  .sbp-public-menu-toggle span{display:block;width:24px;height:2px;background:#222;border-radius:2px}
}

@media(max-width:768px){
  header.sbp-global-header .wrap{
    display:flex!important;
    align-items:center!important;
  }

  header.sbp-global-header .sbp-public-menu-toggle{
    margin-left:auto!important;
    margin-right:6px!important;
    flex:0 0 42px!important;
  }

  header.sbp-global-header .sbp-unified-language{
    margin-left:0!important;
    flex:0 0 auto!important;
  }
}

/* Animierter Netzwerk-Hintergrund */
#sbp-network-bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:.55;
}

body > header,
body > section,
body > main,
body > footer{
  position:relative;
  z-index:1;
}

/* Einheitliche Header-Button-Höhe Desktop */
@media(min-width:769px){
  header.sbp-global-header .navlinks .btn,
  header.sbp-global-header .sbp-unified-language-btn{
    height:42px!important;
    min-height:42px!important;
    box-sizing:border-box!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
}

/* Netzwerk auf der gesamten Homepage sichtbar */
#sbp-network-bg{
  opacity:.88;
}

#sbp-network-bg ~ .hero{
  background:
    radial-gradient(circle at 85% 20%,rgba(239,43,34,.04),transparent 30%),
    linear-gradient(
      180deg,
      rgba(255,255,255,.38),
      rgba(250,251,251,.28)
    )!important;
}

#sbp-network-bg ~ .section{
  background:rgba(255,255,255,.30)!important;
}

#sbp-network-bg ~ .section.soft{
  background:rgba(247,248,248,.36)!important;
}

/* Karten bleiben klar lesbar */
#sbp-network-bg ~ .hero .heroPanel,
#sbp-network-bg ~ .section .card,
#sbp-network-bg ~ .section .workflowItem,
#sbp-network-bg ~ .section .commandStage,
#sbp-network-bg ~ .section .family,
#sbp-network-bg ~ .section .priceCard,
#sbp-network-bg ~ .section .statBand div{
  background:rgba(255,255,255,.94)!important;
  backdrop-filter:blur(2px);
}

/* 20260904: vollständige öffentliche Navigation auf Unterseiten */
.sbp-info-page .sbp-global-header{
  display:flex;
  align-items:center;
}

header.sbp-global-header .sbp-public-main-nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:22px;
  font-size:14px;
  font-weight:700;
}

header.sbp-global-header .sbp-public-main-nav a{
  color:#191d20;
  text-decoration:none;
  white-space:nowrap;
}

header.sbp-global-header .sbp-public-main-nav a:hover{
  color:#ef2435;
}

header.sbp-global-header .sbp-public-main-nav .sbp-public-login,
header.sbp-global-header .sbp-public-main-nav .sbp-public-trial{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid #e1e3e5;
  font-weight:800;
}

header.sbp-global-header .sbp-public-main-nav .sbp-public-trial{
  background:#ef2435;
  border-color:#ef2435;
  color:#fff;
}

header.sbp-global-header .sbp-public-menu-toggle{
  display:none;
  width:42px;
  height:42px;
  margin-left:auto;
  padding:9px;
  border:1px solid #e1e3e5;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
}

header.sbp-global-header .sbp-public-menu-toggle span{
  display:block;
  height:2px;
  margin:4px 0;
  border-radius:2px;
  background:#191d20;
}

@media(max-width:768px){
  header.sbp-global-header .sbp-public-main-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    margin:0;
    padding:14px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    background:#fff;
    border-top:1px solid #e6e8ea;
    border-bottom:1px solid #e6e8ea;
    box-shadow:0 12px 28px rgba(0,0,0,.08);
    z-index:1000;
  }

  header.sbp-global-header .sbp-public-main-nav.open{
    display:flex;
  }

  header.sbp-global-header .sbp-public-main-nav a{
    width:100%;
    padding:11px 14px;
    border-radius:10px;
    text-align:left;
  }

  header.sbp-global-header .sbp-public-main-nav .sbp-public-login,
  header.sbp-global-header .sbp-public-main-nav .sbp-public-trial{
    min-height:44px;
  }

  header.sbp-global-header .sbp-public-menu-toggle{
    display:block;
  }

  .sbp-info-page .sbp-global-header{
    position:relative;
  }
}

/* 20260904: Mobile Public Subpage Menu = Homepage-Geometrie */
@media(max-width:768px){
  header.sbp-global-header .sbp-public-main-nav{
    top:100%!important;
    left:14px!important;
    right:14px!important;
    width:auto!important;
    padding:10px!important;
    gap:4px!important;
    border:1px solid #ddd!important;
    border-radius:10px!important;
    background:#fff!important;
    box-shadow:0 10px 30px rgba(0,0,0,.12)!important;
  }

  header.sbp-global-header .sbp-public-main-nav a{
    display:block!important;
    width:100%!important;
    box-sizing:border-box!important;
    padding:11px 12px!important;
    text-align:center!important;
  }

  header.sbp-global-header .sbp-public-main-nav .sbp-public-login,
  header.sbp-global-header .sbp-public-main-nav .sbp-public-trial{
    min-height:46px!important;
  }
}


/* v20260907-uniform-public-header-gap */
@media (min-width:801px){
  header.sbp-global-header{
    column-gap:20px!important;
  }

  header.sbp-global-header .sbp-public-main-nav{
    gap:20px!important;
  }

  header.sbp-global-header .sbp-unified-language,
  header.sbp-global-header .sbp-public-language,
  header.sbp-global-header #sbp-public-language{
    margin-left:0!important;
    margin-right:0!important;
  }
}


/* v20260908-public-footer-two-columns */
.sbp-global-footer-grid,
.sbp-info-footer-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

@media(max-width:500px){
  .sbp-global-footer-grid,
  .sbp-info-footer-grid{
    grid-template-columns:1fr!important;
  }
}


/* v20260908-public-subpages-desktop-sticky
   Nur öffentliche Unterseiten.
   Startseite bleibt vollständig unabhängig.
   Mobile <=768px bleibt unverändert. */
@media(min-width:769px){
  body.sbp-public-subpage >
  header.sbp-unified-head.sbp-global-header{
    position:sticky!important;
    top:0!important;
    z-index:10000!important;
    width:100%!important;
    background:rgba(255,255,255,.94)!important;
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
  }
}


/* v20260908-public-subpage-readable-glass
   Einheitliche Lesefläche für öffentliche Informations- und Rechtsseiten.
   Das dynamische Netzwerk bleibt sichtbar, läuft aber nicht mehr direkt
   durch Überschriften und Fliesstext. */

body.sbp-info-page.sbp-public-subpage > main.sbp-info-main{
  position:relative;
  z-index:2;

  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);

  border:1px solid rgba(225,228,230,.76);
  border-radius:30px;

  box-shadow:
    0 14px 44px rgba(15,20,24,.035);

  margin-top:34px;
  margin-bottom:70px;
}

/* Bestehende Karten behalten eine etwas stärkere Deckung,
   damit die visuelle Hierarchie bestehen bleibt. */
body.sbp-info-page.sbp-public-subpage .sbp-info-card,
body.sbp-info-page.sbp-public-subpage .security-card,
body.sbp-info-page.sbp-public-subpage .security-wide,
body.sbp-info-page.sbp-public-subpage .contact-card,
body.sbp-info-page.sbp-public-subpage .directory-card{
  background:rgba(255,255,255,.95)!important;
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}

/* Hinweisflächen ebenfalls ruhig halten */
body.sbp-info-page.sbp-public-subpage .sbp-info-note,
body.sbp-info-page.sbp-public-subpage .security-highlight{
  background:rgba(250,250,250,.95)!important;
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}

@media(max-width:800px){
  body.sbp-info-page.sbp-public-subpage > main.sbp-info-main{
    margin-top:20px;
    margin-bottom:42px;
    border-radius:24px;
  }
}

@media(max-width:520px){
  body.sbp-info-page.sbp-public-subpage > main.sbp-info-main{
    margin-top:14px;
    margin-bottom:32px;
    border-radius:20px;
  }
}


/* 20260909: Website Cookie-/Datenschutzhinweis */
.sbp-cookie-banner{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:50000;
  width:min(760px,calc(100vw - 32px));
  box-sizing:border-box;
  padding:18px 20px;
  display:flex;
  align-items:center;
  gap:18px;
  background:#fff;
  border:1px solid #e2e4e6;
  border-radius:18px;
  box-shadow:0 16px 48px rgba(0,0,0,.16);
  color:#17191b;
}

.sbp-cookie-banner[hidden]{
  display:none!important;
}

.sbp-cookie-icon{
  flex:0 0 58px;
  width:58px;
  height:58px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f7f8f8;
  border:1px solid #eceeef;
}

.sbp-cookie-icon img{
  width:38px;
  height:38px;
  display:block;
  object-fit:contain;
}

.sbp-cookie-content{
  flex:1 1 auto;
  min-width:0;
}

.sbp-cookie-title{
  margin:0 0 5px;
  font-size:16px;
  font-weight:800;
  color:#17191b;
}

.sbp-cookie-text{
  margin:0;
  color:#565d62;
  font-size:13px;
  line-height:1.45;
}

.sbp-cookie-actions{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.sbp-cookie-link{
  color:#17191b;
  text-decoration:underline;
  text-underline-offset:2px;
  font-size:13px;
  font-weight:700;
}

.sbp-cookie-link:hover{
  color:#ef2435;
}

.sbp-cookie-accept{
  margin-left:auto;
  min-height:40px;
  padding:0 17px;
  border:0;
  border-radius:999px;
  background:#ef2435;
  color:#fff;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
}

.sbp-cookie-accept:hover{
  filter:brightness(.94);
}

@media(max-width:620px){
  .sbp-cookie-banner{
    bottom:12px;
    width:calc(100vw - 20px);
    padding:16px;
    align-items:flex-start;
    gap:13px;
    border-radius:16px;
  }

  .sbp-cookie-icon{
    flex-basis:48px;
    width:48px;
    height:48px;
    border-radius:12px;
  }

  .sbp-cookie-icon img{
    width:32px;
    height:32px;
  }

  .sbp-cookie-title{
    font-size:15px;
  }

  .sbp-cookie-text{
    font-size:12.5px;
  }

  .sbp-cookie-actions{
    gap:10px;
  }

  .sbp-cookie-accept{
    margin-left:0;
  }
}


/* 20260909: Mobile Fokus-Zoom bei Formulareingaben verhindern */
@media(max-width:900px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,
  textarea{
    font-size:16px!important;
  }
}

/* v20260920-public-header-solid-sticky-final
   Öffentliche Website: Header immer sticky und vollständig deckend.
   Kein Netzwerk-/Seitenhintergrund darf durch den Header sichtbar sein. */
body > header.sbp-unified-head.sbp-global-header,
body > header.sbp-global-header,
header.sbp-unified-head.sbp-global-header,
header.sbp-global-header{
  position:sticky!important;
  top:0!important;
  z-index:10000!important;
  width:100%!important;
  background:#fff!important;
  background-color:#fff!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
}

body > header.sbp-unified-head.sbp-global-header::before,
body > header.sbp-unified-head.sbp-global-header::after,
body > header.sbp-global-header::before,
body > header.sbp-global-header::after{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}


/* v20260920-public-mobile-copyright-centered */
@media(max-width:760px){
  .sbp-global-footer-bottom{
    text-align:center!important;
  }
}
/* v20260920-global-red-checkbox-01
   Verbindliche CI-Regel: Checkbox-Häkchen in der gesamten Plattform rot. */
input[type="checkbox"]{
  accent-color:#ef2b22!important;
}


/* 2026-09-24: einheitlicher öffentlicher Header-/Content-Abstand */
html,body{scroll-padding-top:64px}
body.sbp-public-subpage{
  padding-top:64px!important;
}
body.sbp-public-subpage > header.sbp-unified-head.sbp-global-header,
body.sbp-info-page > header.sbp-unified-head.sbp-global-header{
  position:fixed!important;
  top:0!important;
  right:0!important;
  bottom:auto!important;
  left:0!important;
  width:100%!important;
  height:64px!important;
  min-height:64px!important;
  max-height:64px!important;
  margin:0!important;
  transform:none!important;
  z-index:214748200!important;
  background:#fff!important;
  background-color:#fff!important;
  opacity:1!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Footer-/Infoseiten: gleicher Startabstand wie Module. */
body.sbp-info-page{
  padding-top:64px!important;
}
body.sbp-info-page .sbp-info-main{
  padding-top:28px!important;
}

@media(max-width:800px){
  body.sbp-info-page .sbp-info-main{
    padding-top:14px!important;
  }
}

/* 2026-09-24: einheitliche Inhaltsbreite aller öffentlichen Seiten
   Referenz: Bauverzeichnis = 75vw, max. 1440px. */
body.sbp-public-subpage .wrap,
body.sbp-info-page .sbp-info-main,
.sbp-global-footer-inner{
  width:min(75vw,1440px)!important;
  max-width:none!important;
  box-sizing:border-box!important;
}
body.sbp-info-page .sbp-info-main{
  margin-left:auto!important;
  margin-right:auto!important;
}
@media(max-width:900px){
  body.sbp-public-subpage .wrap,
  body.sbp-info-page .sbp-info-main,
  .sbp-global-footer-inner{
    width:calc(100% - 28px)!important;
  }
}
@media(max-width:520px){
  body.sbp-public-subpage .wrap,
  body.sbp-info-page .sbp-info-main,
  .sbp-global-footer-inner{
    width:calc(100% - 22px)!important;
  }
}

/* 2026-09-24: öffentliche Seiten – vertikale Master-Geometrie
   Referenz ist die Modulseite: 28 px aussen, 66 px bis zum ersten Inhalt. */
@media(min-width:901px){
  body.sbp-public-subpage main.sbp-public-content-frame{
    margin:28px auto!important;
  }
  body.sbp-public-subpage main.sbp-public-content-frame > .hero,
  body.sbp-public-subpage main.sbp-public-content-frame > .productHero{
    padding-top:66px!important;
  }
  body.sbp-info-page main.sbp-info-main{
    margin:28px auto!important;
    padding-top:66px!important;
  }
}

/* Die roten Versal-Angaben verwenden überall dieselbe Typografie. */
body.sbp-public-subpage .eyebrow,
body.sbp-info-page .sbp-info-eyebrow{
  font-size:11px!important;
  line-height:1.2!important;
  letter-spacing:.2em!important;
  text-transform:uppercase!important;
  font-weight:900!important;
  color:#ef2435!important;
}

@media(max-width:900px){
  body.sbp-public-subpage main.sbp-public-content-frame{
    margin:14px auto!important;
  }
  body.sbp-public-subpage main.sbp-public-content-frame > .hero,
  body.sbp-public-subpage main.sbp-public-content-frame > .productHero{
    padding-top:48px!important;
  }
  body.sbp-info-page main.sbp-info-main{
    margin:14px auto!important;
    padding-top:48px!important;
  }
}

/* 2026-09-24: professionelle Scroll-Bewegung auf öffentlichen Seiten */
.sbp-motion-reveal{opacity:0;transform:translate3d(0,26px,0) scale(.992);transition:opacity .62s cubic-bezier(.2,.8,.2,1),transform .72s cubic-bezier(.2,.8,.2,1);transition-delay:var(--sbp-motion-delay,0ms);will-change:transform,opacity}
.sbp-motion-reveal.sbp-inview{opacity:1;transform:translate3d(0,0,0) scale(1)}
.sbp-motion-side{opacity:0;transform:translate3d(-24px,0,0);transition:opacity .58s ease,transform .68s cubic-bezier(.2,.8,.2,1)}
.sbp-motion-side:nth-child(even){transform:translate3d(24px,0,0)}
.sbp-motion-side.sbp-inview{opacity:1;transform:translate3d(0,0,0)}
@media(prefers-reduced-motion:reduce){.sbp-motion-reveal,.sbp-motion-side{opacity:1!important;transform:none!important;transition:none!important}}

/* 2026-09-24: gleicher Innenabstand oben und unten in öffentlichen Inhaltsrahmen. */
@media(min-width:901px){
  body.sbp-info-page main.sbp-info-main{padding-bottom:66px!important}
  body.sbp-public-subpage main.sbp-public-content-frame > section:last-child{padding-bottom:66px!important}
}
@media(max-width:900px){
  body.sbp-info-page main.sbp-info-main{padding-bottom:48px!important}
  body.sbp-public-subpage main.sbp-public-content-frame > section:last-child{padding-bottom:48px!important}
}

/* 2026-09-24: Website nutzt dieselbe KI-Punktwolke wie die App. */
canvas.sbp-live-cloud{
  display:block;
  background:transparent!important;
  object-fit:contain;
}

/* 2026-09-24: Mockups basieren 1:1 auf den gelieferten Desktop-/Mobile-Referenzen. */
.sbp-ref-stage{position:relative;width:100%;min-height:620px;perspective:1600px}
.sbp-ref-desktop{position:absolute;left:0;top:6%;width:88%;aspect-ratio:1919/1066;container-type:inline-size;background:#fff;border:1px solid #dfe2e4;border-radius:1.2cqw;box-shadow:0 30px 70px rgba(17,21,22,.14);overflow:hidden}
.ref-d-header{height:5.8%;display:flex;align-items:center;padding:0 1.45%;border-bottom:1px solid #e9ebec;background:#fff}.ref-d-header img{width:auto;height:2.15cqw;object-fit:contain}.ref-d-nav{margin-left:auto;display:flex;align-items:center;gap:1.18cqw;font-size:.61cqw;font-style:normal;color:#111;white-space:nowrap}.ref-d-nav b{color:#ef2b22}.ref-d-nav i{font-style:normal;border:1px solid #d9dcde;border-radius:999px;padding:.42cqw .8cqw;background:#fff;display:inline-flex;align-items:center;gap:.34cqw}.ref-d-nav i::before{content:"";display:block;flex:0 0 .72cqw;width:.72cqw;height:.72cqw;border-radius:.06cqw;background:linear-gradient(#fff,#fff) center/56% 18% no-repeat,linear-gradient(#fff,#fff) center/18% 56% no-repeat,#e52b1f}
.ref-d-owner{position:absolute;left:11.1%;top:7.9%;display:flex;flex-direction:column;align-items:flex-start}.ref-d-owner small{font-size:.47cqw;letter-spacing:.08em;color:#73787c}.ref-d-owner strong{margin-top:.48cqw;font-size:1.18cqw;line-height:1.05}.ref-d-owner b{margin-top:.52cqw;font-size:.67cqw;color:#ef2b22}
.ref-d-work{position:absolute;left:11.05%;right:11.05%;top:16.8%;bottom:6.35%;display:grid;grid-template-columns:1fr 1fr;gap:1.14%}
.ref-d-ai,.ref-d-cal{position:relative;border:1px solid #e2e4e5;border-radius:1cqw;background:#fff;overflow:hidden}.ref-d-ai{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4.4% 5.5% 2.25%}.ref-d-cloud{width:43%;height:auto;aspect-ratio:480/330;margin-top:7.5%}.ref-d-ai>strong{margin-top:5.1%;font-size:1.02cqw;line-height:1.1}.ref-d-ai>span{margin-top:1.1%;font-size:.68cqw;color:#16834b}.ref-d-warning{position:absolute;left:9.2%;bottom:8.7%;font-size:.43cqw;color:#ff625d;white-space:nowrap}.ref-d-compose{position:absolute;left:7.7%;right:7.7%;bottom:2.2%;height:5.7%;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.48cqw}.ref-d-compose>div{height:100%;display:flex;align-items:center;padding:0 .95cqw;border:1px solid #dfe1e2;border-radius:.76cqw;text-align:left;color:#888;font-size:.62cqw}.ref-d-compose>button{height:100%;min-width:4.55cqw;border:0;border-radius:999px;background:#ef2b22;color:#fff;font-size:.58cqw;font-weight:800}.ref-mic{width:2.15cqw;height:2.15cqw;display:block;font-size:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' d='M12 14a3 3 0 0 0 3-3V5a3 3 0 1 0-6 0v6a3 3 0 0 0 3 3Zm5-3a1 1 0 1 1 2 0 7 7 0 0 1-6 6.93V21h3a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h3v-3.07A7 7 0 0 1 5 11a1 1 0 1 1 2 0 5 5 0 0 0 10 0Z'/%3E%3C/svg%3E") center/62% 62% no-repeat}
.ref-d-cal{padding:2.9%}.ref-d-cal-top{display:flex;justify-content:space-between;align-items:center}.ref-d-cal-top>strong{font-size:.93cqw}.ref-d-cal-top>div{display:flex;align-items:center;gap:.45cqw}.ref-d-cal-top small{font-size:.45cqw;color:#666}.ref-d-cal-top span{min-width:10.2cqw;border:1px solid #dfe1e2;border-radius:.62cqw;padding:.58cqw .72cqw;font-size:.55cqw;text-align:left}.ref-d-cal-top b,.ref-d-cal-top em{display:inline-grid;place-items:center;height:2.2cqw;min-width:3.4cqw;padding:0 .5cqw;border:1px solid #dfe1e2;font-style:normal;font-size:.5cqw}.ref-d-cal-top b{background:#ef2b22;color:#fff;border-color:#ef2b22;border-radius:.55cqw 0 0 .55cqw}.ref-d-cal-top em:last-child{border-radius:0 .55cqw .55cqw 0}.ref-d-cal-month{margin-top:.55cqw;color:#ef2b22;font-size:.6cqw;font-weight:800}.ref-d-cal-nav{display:flex;gap:.55cqw;margin-top:1.05cqw}.ref-d-cal-nav i,.ref-d-cal-nav b{height:2.15cqw;min-width:2.15cqw;display:grid;place-items:center;border:1px solid #dfe1e2;border-radius:999px;font-style:normal;font-size:.55cqw}.ref-d-cal-nav b{min-width:3.2cqw}.ref-d-week{display:grid;grid-template-columns:repeat(7,1fr);margin-top:.7cqw;border:1px solid #e1e3e4;border-bottom:0}.ref-d-week span{text-align:center;font-size:.42cqw;color:#656b6e;padding:.44cqw 0;border-left:1px solid #e8e9ea}.ref-d-week span:first-child{border-left:0}.ref-d-cells{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);height:69%;border-right:1px solid #e1e3e4;border-bottom:1px solid #e1e3e4}.ref-d-cells i{border-top:1px solid #e8e9ea;border-left:1px solid #e8e9ea}.ref-d-footer{position:absolute;left:0;right:0;bottom:0;height:4.5%;display:flex;align-items:center;justify-content:center;gap:1.15cqw;border-top:1px solid #eceeef;color:#777;font-size:.46cqw}
.sbp-ref-phone-shell{position:absolute;right:0;bottom:0;width:27%;aspect-ratio:942/2048;padding:.48%;border-radius:4.6cqw;background:#151719;box-shadow:0 28px 64px rgba(17,21,22,.22);transform:rotate(.7deg);z-index:3;container-type:inline-size}.sbp-ref-phone{position:relative;width:100%;height:100%;overflow:hidden;border-radius:4.05cqw;background:#fff}.sbp-ref-phone:before{content:"";position:absolute;top:.8%;left:50%;width:38%;height:2.5%;border-radius:999px;background:#050505;transform:translateX(-50%);z-index:4}.ref-p-status{height:5.55%;display:flex;align-items:center;justify-content:space-between;padding:1.45% 8.8% 0;font-size:3.2cqw}.ref-p-status span{font-size:2.7cqw;letter-spacing:.18cqw}.ref-p-header{height:8.35%;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:2.5%;padding:0 6.2%;border-bottom:1px solid #e6e7e8}.ref-p-header img{width:auto;height:5.6cqw;max-width:63%;object-fit:contain}.ref-p-header button{width:11.5cqw;height:11.5cqw;border:1px solid #d9dcde;border-radius:3cqw;background:#fff;font-size:5cqw;display:grid;place-items:center}.ref-p-header i{width:11.5cqw;height:11.5cqw;border:1px solid #d9dcde;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:5cqw;background:#fff}.ref-p-owner{height:10.85%;display:flex;flex-direction:column;justify-content:center;padding:0 2.8%}.ref-p-owner small{font-size:2.5cqw;letter-spacing:.08em;color:#74797d}.ref-p-owner strong{margin-top:1.3%;font-size:5.15cqw;line-height:1.05}.ref-p-owner b{margin-top:1.45%;font-size:3.65cqw;color:#ef2b22}.ref-p-ai{position:absolute;left:2.75%;right:2.75%;top:25.35%;bottom:4.7%;border:1px solid #e1e3e4;border-radius:4.3cqw;background:#fff;display:flex;flex-direction:column;align-items:center;text-align:center}.ref-p-cloud{width:55%;height:auto;aspect-ratio:360/260;margin-top:11.5%}.ref-p-ai>strong{margin-top:7.4%;font-size:4.55cqw;line-height:1.17}.ref-p-ai>span{margin-top:1.55%;font-size:3.1cqw;color:#16834b}.ref-p-warning{position:absolute;left:8.1%;bottom:8.25%;font-size:2.25cqw;color:#ff625d;white-space:nowrap}.ref-p-compose{position:absolute;left:3.7%;right:3.7%;bottom:1.45%;height:5.95%;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:1.35cqw}.ref-p-compose>div{height:100%;display:flex;align-items:center;padding:0 3cqw;border:1px solid #dfe1e2;border-radius:3cqw;color:#aaa;text-align:left;font-size:3.35cqw}.ref-p-compose>button{height:100%;min-width:15.6cqw;border:0;border-radius:999px;background:#ef2b22;color:#fff;font-size:3.25cqw;font-weight:800}.ref-p-mic{width:10cqw;height:10cqw;font-size:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' d='M12 14a3 3 0 0 0 3-3V5a3 3 0 1 0-6 0v6a3 3 0 0 0 3 3Zm5-3a1 1 0 1 1 2 0 7 7 0 0 1-6 6.93V21h3a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h3v-3.07A7 7 0 0 1 5 11a1 1 0 1 1 2 0 5 5 0 0 0 10 0Z'/%3E%3C/svg%3E") center/72% 72% no-repeat}.ref-p-footer{position:absolute;left:0;right:0;bottom:0;height:4.55%;display:flex;justify-content:center;align-items:center;gap:5cqw;border-top:1px solid #eceeef;color:#777;font-size:2.65cqw;background:#fff}
@media(max-width:900px){.sbp-ref-stage{min-height:540px}.sbp-ref-desktop{width:91%;top:6%}.sbp-ref-phone-shell{width:31%;right:-1%;bottom:1%}}
@media(max-width:600px){.sbp-ref-stage{min-height:390px}.sbp-ref-desktop{width:94%;left:0;top:8%}.sbp-ref-phone-shell{width:33%;right:-2%;bottom:2%}}

/* 2026-09-24: Mockup-Feinschliff nach den gelieferten Original-Screenshots. */
.sbp-ref-stage{min-height:650px}
.sbp-ref-desktop{
  left:1.5%;
  top:5%;
  width:86%;
  border:1px solid #d8dbdd;
  border-radius:18px;
  box-shadow:0 26px 60px rgba(17,21,22,.13);
  animation:sbpMockDesktopFloat 8s ease-in-out infinite;
}
.ref-d-header{height:5.75%;padding:0 1.25%}
.ref-d-header img{
  width:8.4cqw;
  height:auto;
  max-height:1.15cqw;
  object-fit:contain;
}
.ref-d-warning{
  left:7.7%;
  width:67.9%;
  bottom:8.55%;
  text-align:center;
  font-size:.42cqw;
  white-space:nowrap;
}
.ref-d-compose{left:7.7%;right:7.7%;bottom:2.15%;height:5.65%}
.ref-d-footer{height:4.35%;font-size:.44cqw}

/* Smartphone: echtes Geräteverhältnis, sauberer Fussbereich und korrekter Sprachregler. */
.sbp-ref-phone-shell{
  right:1.2%;
  bottom:1.2%;
  width:25.5%;
  aspect-ratio:430/932;
  padding:.62%;
  border-radius:5.8cqw;
  background:#111315;
  box-shadow:0 30px 66px rgba(17,21,22,.24);
  transform:rotate(.35deg);
  animation:sbpMockPhoneFloat 6.4s ease-in-out infinite;
}
.sbp-ref-phone{border-radius:5.15cqw;background:#fff}
.sbp-ref-phone:before{top:.72%;width:37%;height:2.15%;border-radius:999px}
.ref-p-status{height:5.1%;padding:1.2% 8.2% 0;font-size:2.95cqw}
.ref-p-header{
  height:8.4%;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:2.2%;
  padding:0 6.15%;
}
.ref-p-header img{height:4.45cqw;max-width:61%}
.ref-p-header button{
  width:10.8cqw;
  height:10.8cqw;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#111;
  -webkit-text-fill-color:#111;
  -webkit-appearance:none;
  appearance:none;
  font-size:4.8cqw;
  font-weight:700;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ref-p-header i{
  position:relative;
  width:10.8cqw;
  height:10.8cqw;
  border:1px solid #d4d7d9;
  border-radius:50%;
  background:#fff;
  font-size:0;
  overflow:hidden;
}
.ref-p-header i::before{
  content:"";
  width:5.7cqw;
  height:5.7cqw;
  border-radius:.35cqw;
  background:
    linear-gradient(#fff,#fff) center/56% 18% no-repeat,
    linear-gradient(#fff,#fff) center/18% 56% no-repeat,
    #e52b1f;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.ref-p-header i::after{
  content:none;
}
.ref-p-owner{height:10.45%;padding:0 5.35%}
.ref-p-owner small{font-size:2.2cqw}
.ref-p-owner strong{margin-top:1.15%;font-size:4.55cqw}
.ref-p-owner b{margin-top:1.15%;font-size:3.2cqw}
.ref-p-ai{
  left:4.9%;right:4.9%;
  top:24.55%;
  bottom:5.65%;
  border-radius:4.15cqw;
}
.ref-p-cloud{width:49%;margin-top:10.7%}
.ref-p-ai>strong{margin-top:6.6%;font-size:3.95cqw}
.ref-p-ai>span{margin-top:1.15%;font-size:2.75cqw}
.ref-p-warning{
  left:5.5%;right:5.5%;bottom:8.75%;
  text-align:center;
  font-size:1.95cqw;
  white-space:nowrap;
}
.ref-p-compose{
  left:4.5%;right:4.5%;bottom:1.55%;height:5.85%;gap:1.25cqw;
}
.ref-p-compose>div{padding:0 2.7cqw;border-radius:2.7cqw;font-size:2.85cqw}
.ref-p-compose>button{min-width:14.4cqw;font-size:2.75cqw}
.ref-p-mic{width:8.6cqw;height:8.6cqw}
.ref-p-footer{
  height:4.7%;
  gap:4.7cqw;
  font-size:2.25cqw;
  padding-top:.15cqw;
}

@keyframes sbpMockDesktopFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-5px,0)}
}
@keyframes sbpMockPhoneFloat{
  0%,100%{transform:rotate(.35deg) translate3d(0,0,0)}
  50%{transform:rotate(.35deg) translate3d(0,-9px,0)}
}
@media(max-width:900px){
  .sbp-ref-stage{min-height:560px}
  .sbp-ref-desktop{width:89%;left:.5%;top:6%}
  .sbp-ref-phone-shell{width:29%;right:0;bottom:1.5%}
}
@media(max-width:600px){
  .sbp-ref-stage{min-height:410px}
  .sbp-ref-desktop{width:92%;left:0;top:8%;border-radius:11px}
  .sbp-ref-phone-shell{width:31%;right:-1%;bottom:2%}
}
@media(prefers-reduced-motion:reduce){
  .sbp-ref-desktop,.sbp-ref-phone-shell{animation:none!important}
}

/* 2026-09-24: Smartphone-Mockup als echtes Gerätegehäuse, nach Mobile-Referenz. */
.sbp-ref-phone-shell{
  box-sizing:border-box!important;
  right:1.2%!important;
  bottom:1.5%!important;
  width:214px!important;
  height:463px!important;
  aspect-ratio:auto!important;
  padding:5px!important;
  border-radius:38px!important;
  background:#111315!important;
  box-shadow:0 26px 58px rgba(17,21,22,.25)!important;
  transform:none!important;
  overflow:hidden!important;
  animation:sbpMockPhoneFloat 6.4s ease-in-out infinite!important;
}
.sbp-ref-phone{
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  border-radius:33px!important;
  overflow:hidden!important;
  background:#fff!important;
  position:relative!important;
}
.sbp-ref-phone:before{
  top:7px!important;
  width:78px!important;
  height:18px!important;
  border-radius:999px!important;
}
.ref-p-status{
  box-sizing:border-box!important;
  height:39px!important;
  padding:10px 18px 0!important;
  font-size:9px!important;
}
.ref-p-status span{font-size:7px!important;letter-spacing:.5px!important}
.ref-p-header{
  box-sizing:border-box!important;
  height:52px!important;
  padding:0 12px!important;
  gap:7px!important;
  border-bottom:1px solid #e6e7e8!important;
}
.ref-p-header img{
  height:13px!important;
  width:auto!important;
  max-width:112px!important;
}
.ref-p-header button,
.ref-p-header i{
  width:28px!important;
  height:28px!important;
  flex:0 0 28px!important;
}
.ref-p-header button{
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  background:transparent!important;
  font-size:13px!important;
  line-height:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.ref-p-header i{border-radius:50%!important}
.ref-p-header i::before{width:15px!important;height:15px!important;border-radius:3px!important}
.ref-p-header i::after{content:none!important}
.ref-p-owner{
  box-sizing:border-box!important;
  height:65px!important;
  padding:9px 12px 7px!important;
  justify-content:flex-start!important;
}
.ref-p-owner small{font-size:6px!important;line-height:1.1!important}
.ref-p-owner strong{margin-top:5px!important;font-size:12px!important;line-height:1!important}
.ref-p-owner b{margin-top:4px!important;font-size:8px!important;line-height:1!important}
.ref-p-ai{
  left:10px!important;
  right:10px!important;
  top:156px!important;
  bottom:29px!important;
  border-radius:16px!important;
}
.ref-p-cloud{
  width:102px!important;
  height:74px!important;
  margin-top:27px!important;
}
.ref-p-ai>strong{margin-top:17px!important;font-size:10px!important;line-height:1.2!important}
.ref-p-ai>span{margin-top:5px!important;font-size:7px!important}
.ref-p-warning{
  left:12px!important;
  right:12px!important;
  bottom:46px!important;
  font-size:5px!important;
  line-height:1.15!important;
  text-align:center!important;
}
.ref-p-compose{
  left:8px!important;
  right:8px!important;
  bottom:8px!important;
  height:29px!important;
  gap:5px!important;
}
.ref-p-compose>div{
  height:29px!important;
  padding:0 8px!important;
  border-radius:10px!important;
  font-size:7px!important;
}
.ref-p-compose>button{
  height:29px!important;
  min-width:44px!important;
  font-size:7px!important;
}
.ref-p-mic{width:25px!important;height:25px!important}
.ref-p-footer{
  height:24px!important;
  gap:14px!important;
  font-size:6px!important;
  padding:0!important;
}
@keyframes sbpMockPhoneFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-8px,0)}
}
@media(max-width:900px){
  .sbp-ref-phone-shell{width:190px!important;height:411px!important;right:0!important}
  .sbp-ref-phone{border-radius:29px!important}
}
@media(max-width:600px){
  .sbp-ref-phone-shell{width:138px!important;height:299px!important;padding:4px!important;border-radius:27px!important}
  .sbp-ref-phone{border-radius:23px!important}
  .sbp-ref-phone:before{top:4px!important;width:50px!important;height:11px!important}
  .ref-p-status{height:25px!important;padding:6px 11px 0!important;font-size:6px!important}
  .ref-p-status span{font-size:5px!important}
  .ref-p-header{height:34px!important;padding:0 7px!important;gap:4px!important}.ref-p-header img{height:8px!important;max-width:72px!important}.ref-p-header button,.ref-p-header i{width:19px!important;height:19px!important;flex-basis:19px!important}.ref-p-header button{font-size:9px!important;border-radius:5px!important}.ref-p-header i::before{width:10px!important;height:10px!important}.ref-p-header i::after{font-size:9px!important}
  .ref-p-owner{height:42px!important;padding:6px 8px 4px!important}.ref-p-owner small{font-size:4px!important}.ref-p-owner strong{margin-top:3px!important;font-size:8px!important}.ref-p-owner b{margin-top:2px!important;font-size:5.5px!important}
  .ref-p-ai{left:7px!important;right:7px!important;top:103px!important;bottom:19px!important;border-radius:11px!important}.ref-p-cloud{width:66px!important;height:48px!important;margin-top:18px!important}.ref-p-ai>strong{margin-top:11px!important;font-size:6.5px!important}.ref-p-ai>span{margin-top:3px!important;font-size:4.5px!important}.ref-p-warning{bottom:31px!important;font-size:3.3px!important}.ref-p-compose{left:5px!important;right:5px!important;bottom:5px!important;height:19px!important;gap:3px!important}.ref-p-compose>div{height:19px!important;padding:0 5px!important;border-radius:7px!important;font-size:4.5px!important}.ref-p-compose>button{height:19px!important;min-width:29px!important;font-size:4.5px!important}.ref-p-mic{width:16px!important;height:16px!important}.ref-p-footer{height:16px!important;font-size:4px!important;gap:9px!important}
}

/* 2026-09-24: Mockup-Korrektur nach Original-Screenshots */
/* Desktop-Kalender: Monat vollständig ausfüllen + Tageszahlen */
.ref-d-cal{display:flex!important;flex-direction:column!important;min-height:0!important}
.ref-d-week{flex:0 0 auto!important}
.ref-d-cells{flex:1 1 auto!important;height:auto!important;min-height:0!important;align-content:stretch!important}
.ref-d-cells i{position:relative!important;min-height:0!important;background:#fff!important}
.ref-d-cells i::after{content:attr(data-day);position:absolute;left:.55cqw;top:.42cqw;font-size:.53cqw;line-height:1;color:#151719;font-style:normal;font-weight:700}
.ref-d-cells i[data-month="prev"]::after,.ref-d-cells i[data-month="next"]::after{color:#b7babc;font-weight:500}

/* Smartphone wieder leicht angewinkelt, aber ohne verzogene Geometrie */
.sbp-ref-phone-shell{transform:rotate(1.25deg)!important;transform-origin:50% 72%!important;animation:sbpMockPhoneFloatAngled 6.2s ease-in-out infinite!important}
@keyframes sbpMockPhoneFloatAngled{
  0%,100%{transform:rotate(1.25deg) translate3d(0,0,0)}
  50%{transform:rotate(1.25deg) translate3d(0,-8px,0)}
}

/* Smartphone-Header näher am gelieferten Screenshot */
.ref-p-status{height:34px!important;padding:8px 17px 0!important;font-size:8px!important}
.ref-p-status span{font-size:6px!important;letter-spacing:.35px!important}
.ref-p-header{height:46px!important;padding:0 11px!important;gap:6px!important}
.ref-p-header img{height:11px!important;max-width:104px!important}
.ref-p-header button,.ref-p-header i{width:24px!important;height:24px!important;flex:0 0 24px!important}
.ref-p-header button{font-size:11px!important;border-radius:7px!important}
.ref-p-header i::before{width:13px!important;height:13px!important;border-radius:2.5px!important}
.ref-p-header i::after{font-size:12px!important}
.ref-p-owner{height:58px!important;padding:8px 11px 6px!important}
.ref-p-owner small{font-size:5.3px!important}.ref-p-owner strong{margin-top:4px!important;font-size:10.5px!important}.ref-p-owner b{margin-top:3px!important;font-size:7px!important}
.ref-p-ai{top:138px!important;bottom:27px!important}

/* Smartphone-Composer und Hinweis deutlich kompakter */
.ref-p-warning{left:8px!important;right:auto!important;width:calc(100% - 78px)!important;bottom:40px!important;font-size:4.2px!important;text-align:center!important;white-space:nowrap!important}
.ref-p-compose{left:7px!important;right:7px!important;bottom:7px!important;height:24px!important;gap:4px!important}
.ref-p-compose>div{height:24px!important;padding:0 7px!important;border-radius:8px!important;font-size:5.7px!important}
.ref-p-compose>button{height:24px!important;min-width:37px!important;font-size:5.8px!important;padding:0 7px!important}
.ref-p-mic{width:21px!important;height:21px!important;background-size:68% 68%!important}
.ref-p-footer{height:22px!important;font-size:5.2px!important;gap:12px!important}

/* Sichtbare, aber ruhige Dynamik für beide Mockups */
.sbp-ref-stage{animation:sbpStageBreath 9s ease-in-out infinite!important}
.sbp-ref-desktop{animation:sbpMockDesktopFloat 7.4s ease-in-out infinite!important}
@keyframes sbpStageBreath{0%,100%{filter:drop-shadow(0 0 0 rgba(0,0,0,0))}50%{filter:drop-shadow(0 8px 18px rgba(17,21,22,.035))}}
@keyframes sbpMockDesktopFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}}

@media(max-width:600px){
  .ref-p-status{height:22px!important;padding:5px 10px 0!important;font-size:5px!important}.ref-p-status span{font-size:4px!important}
  .ref-p-header{height:30px!important;padding:0 7px!important;gap:3px!important}.ref-p-header img{height:7px!important;max-width:66px!important}.ref-p-header button,.ref-p-header i{width:16px!important;height:16px!important;flex-basis:16px!important}.ref-p-header button{font-size:7px!important;border-radius:5px!important}.ref-p-header i::before{width:9px!important;height:9px!important}.ref-p-header i::after{font-size:8px!important}
  .ref-p-owner{height:38px!important;padding:5px 7px 4px!important}.ref-p-owner small{font-size:3.5px!important}.ref-p-owner strong{font-size:7px!important;margin-top:2px!important}.ref-p-owner b{font-size:4.7px!important;margin-top:2px!important}
  .ref-p-ai{top:91px!important;bottom:18px!important}
  .ref-p-warning{left:5px!important;width:calc(100% - 51px)!important;bottom:27px!important;font-size:2.8px!important}
  .ref-p-compose{left:5px!important;right:5px!important;bottom:5px!important;height:16px!important;gap:2px!important}.ref-p-compose>div{height:16px!important;padding:0 4px!important;border-radius:5px!important;font-size:3.8px!important}.ref-p-compose>button{height:16px!important;min-width:24px!important;font-size:3.8px!important;padding:0 4px!important}.ref-p-mic{width:14px!important;height:14px!important}.ref-p-footer{height:15px!important;font-size:3.5px!important;gap:8px!important}
}
@media(prefers-reduced-motion:reduce){.sbp-ref-stage,.sbp-ref-desktop,.sbp-ref-phone-shell{animation:none!important}}

/* 2026-09-24: sichtbare Scroll-Dynamik auf den öffentlichen Seiten. */
main > section{translate:0 var(--sbp-section-parallax,0px);transition:translate .16s linear}
.sbp-ref-stage{translate:0 var(--sbp-stage-parallax,0px);transition:translate .16s linear}
.sbp-ref-desktop{translate:0 var(--sbp-desktop-parallax,0px)}
.sbp-ref-phone-shell{translate:0 var(--sbp-phone-parallax,0px)}
.sbp-motion-reveal{opacity:0;transform:translate3d(0,42px,0) scale(.978);transition:opacity .72s cubic-bezier(.2,.8,.2,1),transform .82s cubic-bezier(.2,.8,.2,1)}
.sbp-motion-side{opacity:0;transform:translate3d(-42px,0,0) scale(.988);transition:opacity .68s ease,transform .82s cubic-bezier(.2,.8,.2,1)}
.sbp-motion-side:nth-child(even){transform:translate3d(42px,0,0) scale(.988)}
.sbp-motion-reveal.sbp-inview,.sbp-motion-side.sbp-inview{opacity:1;transform:translate3d(0,0,0) scale(1)}
.module-story-card,.commCard,.priceCard,.workflowItem,.card{transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,border-color .32s ease!important}
.module-story-card:hover,.commCard:hover,.priceCard:hover,.workflowItem:hover,.card:hover{transform:translateY(-7px)!important;box-shadow:0 18px 42px rgba(17,21,22,.10)!important}
@media(prefers-reduced-motion:reduce){main > section,.sbp-ref-stage,.sbp-ref-desktop,.sbp-ref-phone-shell{translate:none!important;transition:none!important}}

/* 2026-09-24: Mockups müssen auch ohne Scrollen klar lebendig wirken. */
.sbp-ref-stage{
  transform-origin:50% 50%;
  animation:sbpStageIdle 10s ease-in-out infinite!important;
}
.sbp-ref-desktop{
  transform-origin:48% 62%;
  animation:sbpDesktopIdle 7.2s ease-in-out infinite!important;
}
.sbp-ref-phone-shell{
  transform-origin:50% 78%;
  animation:sbpPhoneIdle 5.2s ease-in-out infinite!important;
}
.ref-d-cloud,.ref-p-cloud{
  animation:sbpCloudIdle 4.4s ease-in-out infinite!important;
}
.ref-d-cal-top b{
  animation:sbpActivePulse 3.2s ease-in-out infinite!important;
}
.ref-p-ai>span,.ref-d-ai>span{
  animation:sbpReadyPulse 2.8s ease-in-out infinite!important;
}
@keyframes sbpStageIdle{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-4px,0) scale(1.006)}
}
@keyframes sbpDesktopIdle{
  0%,100%{transform:translate3d(0,0,0) rotateZ(0deg) scale(1)}
  25%{transform:translate3d(-3px,-7px,0) rotateZ(-.18deg) scale(1.004)}
  50%{transform:translate3d(2px,-11px,0) rotateZ(.12deg) scale(1.008)}
  75%{transform:translate3d(4px,-5px,0) rotateZ(.18deg) scale(1.004)}
}
@keyframes sbpPhoneIdle{
  0%,100%{transform:translate3d(0,0,0) rotate(1.25deg) scale(1)}
  25%{transform:translate3d(-4px,-10px,0) rotate(.55deg) scale(1.012)}
  50%{transform:translate3d(3px,-18px,0) rotate(1.8deg) scale(1.022)}
  75%{transform:translate3d(5px,-8px,0) rotate(2.15deg) scale(1.01)}
}
@keyframes sbpCloudIdle{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.94}
  50%{transform:translate3d(0,-5px,0) scale(1.035);opacity:1}
}
@keyframes sbpActivePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(239,43,34,0)}
  50%{box-shadow:0 0 0 4px rgba(239,43,34,.10)}
}
@keyframes sbpReadyPulse{
  0%,100%{opacity:.72}
  50%{opacity:1}
}
@media(max-width:600px){
  @keyframes sbpPhoneIdle{
    0%,100%{transform:translate3d(0,0,0) rotate(1.15deg) scale(1)}
    50%{transform:translate3d(2px,-10px,0) rotate(1.8deg) scale(1.018)}
  }
  @keyframes sbpDesktopIdle{
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(0,-6px,0) scale(1.006)}
  }
}
@media(prefers-reduced-motion:reduce){
  .sbp-ref-stage,.sbp-ref-desktop,.sbp-ref-phone-shell,.ref-d-cloud,.ref-p-cloud,.ref-d-cal-top b,.ref-p-ai>span,.ref-d-ai>span{animation:none!important}
}

/* 2026-09-24: Header-CTA Hover – Text bleibt lesbar auf rotem Button. */
header.sbp-global-header .sbp-public-main-nav .sbp-public-trial:hover,
header.sbp-global-header .sbp-public-main-nav .sbp-public-trial:focus-visible{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background:#d91f2d!important;
  border-color:#d91f2d!important;
}

/* 2026-09-24: sichtbare Scroll-Dynamik für öffentliche Inhaltsbereiche */
.sbp-scroll-float{
  transform:translate3d(var(--sbp-scroll-x,0px),var(--sbp-scroll-shift,0px),0) rotate(var(--sbp-scroll-rotate,0deg)) scale(var(--sbp-scroll-scale,1));
  transition:transform .12s linear;
  will-change:transform;
}

@media(prefers-reduced-motion:reduce){.sbp-scroll-float{translate:none!important;transition:none!important}}

@keyframes sbpPublicIdleFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -3px}
}
body.sbp-public-subpage .client-card,
body.sbp-public-subpage .client-free,
body.sbp-public-subpage .trustee-register-card,
body.sbp-public-subpage .directory-card{
  animation:sbpPublicIdleFloat 6.5s ease-in-out infinite;
}
body.sbp-public-subpage .client-card:nth-child(2n),
body.sbp-public-subpage .directory-card:nth-child(2n){animation-delay:.8s}
body.sbp-public-subpage .client-card:nth-child(3n),
body.sbp-public-subpage .directory-card:nth-child(3n){animation-delay:1.6s}
@media(prefers-reduced-motion:reduce){
  body.sbp-public-subpage .client-card,body.sbp-public-subpage .client-free,body.sbp-public-subpage .trustee-register-card,body.sbp-public-subpage .directory-card{animation:none!important}
}