/* OMSAG LP · Web · 06 Umsetzung — Showcase mit Tab-Navigation und Konzeptbeispiel-Dialog. */
.omsag-lp-wbb{
  --b:var(--omsag-lp-brand,#50aa3c);--bl:var(--omsag-lp-lime,#aad337);--sky:#6fb4dd;
  --grad:var(--omsag-lp-brand-grad,linear-gradient(135deg,#50aa3c,#aad337));
  --ink:var(--omsag-lp-ink,#232730);--ts:var(--omsag-lp-text-soft,#5a6270);--mut:var(--omsag-lp-muted,#8a93a3);
  --ln:var(--omsag-lp-line,#e6e8ec);--bga:var(--omsag-lp-bg-alt,#f9faf8);
  --pill:var(--omsag-lp-pill,999px);--r:var(--omsag-lp-radius,20px);--rl:var(--omsag-lp-radius-lg,28px);
  --ez:var(--omsag-lp-ease,cubic-bezier(.2,.7,.2,1));
  --font:var(--omsag-lp-font,'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif);
  /* Aliase fuer die portierten Showcase-Regeln */
  --brand:var(--b);--lime:var(--bl);--gradient:var(--grad);--soft:var(--ts);--ease:var(--ez);
  --icon-gradient:linear-gradient(135deg,var(--sky),var(--b) 58%,var(--bl));
  position:relative;isolation:isolate;font-family:var(--font);color:var(--ink);
  -webkit-font-smoothing:antialiased;padding:clamp(76px,8.5vw,116px) 0;
  background:radial-gradient(circle at 4% 4%,rgba(111,180,221,.08),transparent 40%),var(--omsag-lp-bg,#fff);
}
.omsag-lp-wbb,.omsag-lp-wbb *,.omsag-lp-wbb *::before,.omsag-lp-wbb *::after{box-sizing:border-box}
.omsag-lp-wbb a:focus,.omsag-lp-wbb a:focus-visible{outline:none;box-shadow:none}
.omsag-lp-wbb__container{position:relative;z-index:1;width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(20px,2.5vw,28px)}

.omsag-lp-wbb__head{max-width:64ch;margin:0 0 clamp(26px,3vw,34px)}
.omsag-lp-wbb__overline{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--b)}
.omsag-lp-wbb__headline{margin:0 0 16px;max-width:22ch;font-size:clamp(30px,4vw,46px);font-weight:700;letter-spacing:-.026em;line-height:1.08}
.omsag-lp-wbb__subline{margin:0;max-width:70ch;font-size:clamp(15.5px,1.25vw,18px);line-height:1.6;color:var(--ts)}

.omsag-lp-wbb__label{display:flex;align-items:center;gap:12px;margin:0 0 18px;
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
.omsag-lp-wbb__label span{width:26px;height:1.5px;border-radius:2px;background:var(--grad)}

.omsag-lp-wbb__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(20px,3vw,34px);
  margin-top:clamp(26px,3vw,38px)}
.omsag-lp-wbb__btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:var(--pill);
  background:linear-gradient(135deg,#232730,#3a4150);color:#fff;font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;
  transition:transform .25s var(--ez),box-shadow .25s var(--ez)}
.omsag-lp-wbb__btn svg{width:18px;height:18px;transition:transform .25s var(--ez)}
.omsag-lp-wbb__btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 18px 40px -16px rgba(35,39,48,.5)}
.omsag-lp-wbb__btn:hover svg{transform:translateX(4px)}
.omsag-lp-wbb__note{display:flex;align-items:center;gap:12px;margin:0;font-size:14.5px;color:var(--ts);line-height:1.5}
.omsag-lp-wbb__note>span{flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;color:var(--b);
  background:var(--bga);border:1px solid var(--ln)}
.omsag-lp-wbb__note>span svg{width:19px;height:19px}


/* ── Normalisierung der dunklen Bereiche ───────────────────────────────────
   Theme-Regeln fuer h2/h3/p setzen eigene Farben und Abstaende. Diese Basis
   laeuft VOR den portierten Regeln, damit deren Werte weiter gewinnen.      */
.omsag-lp-wbb .wbb-implementation-showcase,
.omsag-lp-wbb .wbb-example-dialog{color:#f2f6f5}
.omsag-lp-wbb .wbb-implementation-showcase :is(h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ul,ol,li,figure,blockquote),
.omsag-lp-wbb .wbb-example-dialog :is(h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ul,ol,li,figure,blockquote){margin:0;padding:0}
/* Farbe und Schrift auch fuer Inline-Elemente und Buttons — aber ohne Abstaende
   zu killen, sonst verliert z. B. der CTA im Popup sein Padding. */
.omsag-lp-wbb .wbb-implementation-showcase :is(h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ul,ol,li,span,strong,b,em,small,i,a,button),
.omsag-lp-wbb .wbb-example-dialog :is(h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ul,ol,li,span,strong,b,em,small,i,a,button){
  color:inherit;font-family:inherit;text-transform:none;text-shadow:none}
.omsag-lp-wbb .wbb-implementation-showcase :is(ul,ol),
.omsag-lp-wbb .wbb-example-dialog :is(ul,ol){list-style:none}
.omsag-lp-wbb .wbb-implementation-showcase button,
.omsag-lp-wbb .wbb-example-dialog button{border:0;background:none;-webkit-appearance:none;appearance:none;line-height:1.2}
.omsag-lp-wbb .wbb-implementation-showcase{position: relative; display: grid; min-height: 500px; overflow: hidden; grid-template-columns: minmax(302px, 25%) 1fr; border: 1px solid #2c4148; border-radius: 26px; background: #132128; box-shadow: 0 38px 90px -60px rgba(15,38,46,.85);}
.omsag-lp-wbb .wbb-implementation-nav{display: grid; grid-template-rows: repeat(4, 1fr); padding: 13px; border-right: 1px solid rgba(151,184,187,.15); background: linear-gradient(180deg, #101d23, #14252b);}
.omsag-lp-wbb .wbb-implementation-nav button{position: relative; display: grid; min-width: 0; grid-template-columns: 36px minmax(0,1fr) 27px; gap: 11px; align-items: center; padding: 11px 10px; border: 0; border-bottom: 1px solid rgba(151,184,187,.12); background: transparent; color: #87979e; cursor: pointer; text-align: left; transition: color .35s ease, background .35s ease, padding .35s var(--ease);}
.omsag-lp-wbb .wbb-implementation-nav button:last-child{border-bottom: 0;}
.omsag-lp-wbb .wbb-implementation-nav button::before{position: absolute; inset: 5px 0; border: 1px solid transparent; border-radius: 15px; background: transparent; content: ""; transition: border-color .35s ease, background .35s ease;}
.omsag-lp-wbb .wbb-implementation-nav button > *{position: relative; z-index: 1;}
.omsag-lp-wbb .wbb-implementation-nav button span{display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(151,184,187,.2); border-radius: 50%; font-size: 13px; font-weight: 700; transition: color .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;}
.omsag-lp-wbb .wbb-implementation-nav button strong{font-size: 15px; font-weight: 600; line-height: 1.2;}
.omsag-lp-wbb .wbb-implementation-nav button i{display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(151,184,187,.15); border-radius: 50%; font-size: 15px; font-style: normal; opacity: .45; transform: translateX(-5px); transition: opacity .35s ease, transform .35s var(--ease), border-color .35s ease;}
.omsag-lp-wbb .wbb-implementation-nav button:hover{color: #d9e4e3;}
.omsag-lp-wbb .wbb-implementation-nav button.is-active{padding-left: 15px; color: #f5f8f7;}
.omsag-lp-wbb .wbb-implementation-nav button.is-active::before{border-color: rgba(170,211,55,.22); background: linear-gradient(90deg, rgba(170,211,55,.1), rgba(111,180,221,.035));}
.omsag-lp-wbb .wbb-implementation-nav button.is-active span{border-color: var(--lime); background: var(--gradient); color: #142128; box-shadow: 0 8px 24px -12px rgba(170,211,55,.9);}
.omsag-lp-wbb .wbb-implementation-nav button.is-active i{border-color: rgba(170,211,55,.38); color: var(--lime); opacity: 1; transform: none;}
.omsag-lp-wbb .wbb-implementation-nav button:focus-visible{z-index: 2; outline: 2px solid var(--lime); outline-offset: -3px; border-radius: 15px;}
.omsag-lp-wbb .wbb-implementation-stage{position: relative; min-width: 0; overflow: hidden; background: radial-gradient(circle at 85% 10%, rgba(111,180,221,.12), transparent 36%), radial-gradient(circle at 30% 100%, rgba(170,211,55,.08), transparent 34%), #17262d;}
.omsag-lp-wbb .wbb-implementation-stage::before{position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(146,177,180,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(146,177,180,.12) 1px, transparent 1px); background-size: 42px 42px; content: ""; mask-image: linear-gradient(90deg, transparent, #000 35%, #000);}
.omsag-lp-wbb .wbb-implementation-panel{position: relative; z-index: 1; display: grid; min-height: 500px; grid-template-columns: minmax(286px,.86fr) minmax(360px,1.14fr); gap: clamp(24px, 3.2vw, 56px); align-items: center; padding: 32px clamp(26px, 3.4vw, 54px) 56px;}
.omsag-lp-wbb .wbb-implementation-panel[hidden]{display: none;}
.omsag-lp-wbb .wbb-implementation-panel.is-active .wbb-implementation-panel__copy{animation: wbb-implementation-copy-in .65s var(--ease) both;}
.omsag-lp-wbb .wbb-implementation-panel.is-active .wbb-implementation-visual{animation: wbb-implementation-visual-in .8s var(--ease) both;}
.omsag-lp-wbb .wbb-implementation-panel__copy{position: relative; z-index: 2; min-width: 0;}
.omsag-lp-wbb .wbb-implementation-number{display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 20px; border: 1px solid rgba(170,211,55,.42); border-radius: 50%; background: rgba(170,211,55,.08); color: var(--lime); font-size: 13px; font-weight: 800;}
.omsag-lp-wbb .wbb-implementation-panel h3{max-width: 14ch; margin: 0 0 17px; color: #f3f7f6; font-size: clamp(31px, 3vw, 48px); letter-spacing: -.045em; line-height: .98;}
.omsag-lp-wbb .wbb-implementation-panel__copy > p{max-width: 40ch; margin: 0; color: #9ba9ae; font-size: 15px; line-height: 1.55;}
.omsag-lp-wbb .wbb-platform-pair{display: grid; gap: 9px; margin-top: 27px;}
.omsag-lp-wbb .wbb-platform-pair a,
.omsag-lp-wbb .wbb-platform-pair button,
.omsag-lp-wbb .wbb-platform-pair > div{display: grid; min-height: 88px; grid-template-columns: 46px minmax(0,1fr) 25px; gap: 13px; align-items: center; padding: 12px; border: 1px solid rgba(151,184,187,.18); border-radius: 14px; background: rgba(10,24,29,.42); color: inherit; text-decoration: none; transition: border-color .25s ease, background .25s ease, transform .25s var(--ease);}
.omsag-lp-wbb .wbb-platform-pair a:hover,
.omsag-lp-wbb .wbb-platform-pair button:hover{border-color: rgba(170,211,55,.48); background: rgba(170,211,55,.06); transform: translateX(3px);}
.omsag-lp-wbb .wbb-platform-mark{display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(151,184,187,.27); border-radius: 50%; color: #dce7e5; font-weight: 800;}
.omsag-lp-wbb .wbb-platform-mark--wp{font-family: Georgia, serif; font-size: 24px;}
.omsag-lp-wbb .wbb-platform-mark--pim{border-radius: 12px; color: var(--lime); font-size: 13px;}
.omsag-lp-wbb .wbb-platform-pair p{display: flex; margin: 0; flex-direction: column;}
.omsag-lp-wbb .wbb-platform-pair strong{color: #eff5f3; font-size: 15px;}
.omsag-lp-wbb .wbb-platform-pair small{margin-top: 3px; color: #8e9da3; font-size: 13px; line-height: 1.3;}
.omsag-lp-wbb .wbb-platform-pair em{color: var(--lime); font-size: 17px; font-style: normal;}
.omsag-lp-wbb .wbb-case-link{display: grid; width: min(100%, 340px); min-height: 72px; grid-template-columns: 51px 1fr 27px; gap: 12px; align-items: center; margin-top: 32px; padding: 9px; border: 1px solid rgba(151,184,187,.18); border-radius: 14px; background: rgba(10,24,29,.42); color: #eef4f3; text-decoration: none; transition: border-color .25s ease, background .25s ease, transform .25s var(--ease);}
.omsag-lp-wbb .wbb-case-link:hover{border-color: rgba(170,211,55,.48); background: rgba(170,211,55,.06); transform: translateX(3px);}
.omsag-lp-wbb .wbb-mini-case{position: relative; display: block; width: 49px; height: 49px; overflow: hidden; border: 1px solid rgba(151,184,187,.16); border-radius: 10px; background: linear-gradient(145deg, rgba(111,180,221,.2), rgba(170,211,55,.13));}
.omsag-lp-wbb .wbb-mini-case::before{position: absolute; inset: 12px; border: 1px solid rgba(31,49,55,.28); border-radius: 5px; content: "";}
.omsag-lp-wbb .wbb-mini-case::after{position: absolute; right: 10px; bottom: 11px; left: 10px; height: 3px; border-radius: 4px; background: rgba(219,235,229,.5); box-shadow: 0 -9px 0 rgba(219,235,229,.24); content: "";}
.omsag-lp-wbb .wbb-mini-case--app{background: linear-gradient(145deg, rgba(170,211,55,.23), rgba(80,170,60,.22));}
.omsag-lp-wbb .wbb-mini-case--integration{background: linear-gradient(145deg, rgba(111,180,221,.25), rgba(80,170,60,.18));}
.omsag-lp-wbb .wbb-case-link strong{font-size: 13px;}
.omsag-lp-wbb .wbb-case-link em{color: var(--lime); font-size: 18px; font-style: normal;}
.omsag-lp-wbb .wbb-implementation-visual{position: relative; min-width: 0; height: 390px; overflow: hidden; border: 1px solid rgba(151,184,187,.2); border-radius: 22px; background: linear-gradient(145deg, rgba(230,241,239,.075), rgba(87,119,128,.035)); box-shadow: 0 35px 65px -45px #020a0d;}
.omsag-lp-wbb .wbb-implementation-visual::after{position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); content: ""; pointer-events: none;}
.omsag-lp-wbb .wbb-visual-browserbar{display: flex; height: 40px; align-items: center; gap: 6px; padding: 0 15px; border-bottom: 1px solid rgba(151,184,187,.16); background: rgba(8,21,26,.45);}
.omsag-lp-wbb .wbb-visual-browserbar i{width: 7px; height: 7px; border-radius: 50%; background: #73878d;}
.omsag-lp-wbb .wbb-visual-browserbar i:first-child{background: var(--lime);}
.omsag-lp-wbb .wbb-visual-browserbar span{height: 7px; margin-left: 8px; border-radius: 7px; background: rgba(151,184,187,.14); flex: 1;}
.omsag-lp-wbb .wbb-visual-website-hero{display: grid; height: 235px; grid-template-columns: 1.12fr .88fr; gap: 18px; align-items: center; padding: 28px; background: radial-gradient(circle at 80% 20%, rgba(111,180,221,.26), transparent 45%), linear-gradient(135deg, rgba(170,211,55,.08), transparent 55%);}
.omsag-lp-wbb .wbb-visual-website-hero > div{display: flex; flex-direction: column;}
.omsag-lp-wbb .wbb-visual-website-hero small{color: var(--lime); font-size: 13px; letter-spacing: .1em;}
.omsag-lp-wbb .wbb-visual-website-hero strong{width: 90%; height: 19px; margin-top: 15px; border-radius: 5px; background: #eff6f4; box-shadow: 0 28px 0 #eff6f4;}
.omsag-lp-wbb .wbb-visual-website-hero span{width: 72%; height: 6px; margin-top: 50px; border-radius: 6px; background: #71858a; box-shadow: 0 13px 0 rgba(113,133,138,.55);}
.omsag-lp-wbb .wbb-visual-website-hero b{width: 91px; height: 30px; margin-top: 25px; border-radius: 20px; background: var(--gradient);}
.omsag-lp-wbb .wbb-visual-website-hero > i{position: relative; height: 172px; border: 1px solid rgba(151,184,187,.17); border-radius: 18px; background: linear-gradient(135deg, rgba(111,180,221,.16), rgba(170,211,55,.13));}
.omsag-lp-wbb .wbb-visual-website-hero > i::before{position: absolute; inset: 18px; border: 1px solid rgba(224,238,234,.16); border-radius: 50% 50% 42% 58% / 47% 42% 58% 53%; background: radial-gradient(circle at 35% 30%, rgba(170,211,55,.5), transparent 16%), radial-gradient(circle at 60% 60%, rgba(111,180,221,.45), transparent 18%), rgba(16,34,40,.62); content: ""; animation: wbb-visual-orbit 6s ease-in-out infinite;}
.omsag-lp-wbb .wbb-visual-website-modules{display: grid; height: 114px; grid-template-columns: 1fr 1.25fr .8fr; gap: 10px; padding: 13px 18px 18px;}
.omsag-lp-wbb .wbb-visual-website-modules i{border: 1px solid rgba(151,184,187,.14); border-radius: 11px; background: rgba(9,23,28,.42);}
.omsag-lp-wbb .wbb-implementation-visual--conversion{display: grid; grid-template-columns: 1fr 24px 1.1fr 24px 1fr 24px .82fr; gap: 8px; align-items: center; padding: 30px;}
.omsag-lp-wbb .wbb-implementation-visual--conversion > span{color: var(--lime); font-size: 20px; text-align: center; animation: wbb-conversion-pulse 1.8s ease-in-out infinite;}
.omsag-lp-wbb .wbb-conversion-node,
.omsag-lp-wbb .wbb-conversion-page,
.omsag-lp-wbb .wbb-conversion-form{position: relative; display: flex; min-width: 0; min-height: 155px; align-items: center; justify-content: center; padding: 14px; border: 1px solid rgba(151,184,187,.2); border-radius: 16px; background: rgba(8,21,26,.58); flex-direction: column;}
.omsag-lp-wbb .wbb-conversion-node small,
.omsag-lp-wbb .wbb-conversion-page small,
.omsag-lp-wbb .wbb-conversion-form small{color: #82949a; font-size: 13px; letter-spacing: .08em;}
.omsag-lp-wbb .wbb-conversion-node i{width: 61px; height: 61px; margin-top: 18px; border: 1px solid rgba(111,180,221,.55); border-radius: 14px; background: radial-gradient(circle, var(--sky) 0 5px, transparent 6px), linear-gradient(135deg, rgba(111,180,221,.16), rgba(170,211,55,.07));}
.omsag-lp-wbb .wbb-conversion-page strong{width: 72%; height: 8px; margin-top: 19px; border-radius: 5px; background: #dce7e5; box-shadow: 0 16px 0 #64777d;}
.omsag-lp-wbb .wbb-conversion-page i{width: 74%; height: 48px; margin-top: 29px; border-radius: 9px; background: linear-gradient(135deg, rgba(111,180,221,.3), rgba(170,211,55,.18));}
.omsag-lp-wbb .wbb-conversion-page b{width: 50px; height: 16px; margin-top: 10px; border-radius: 12px; background: var(--lime);}
.omsag-lp-wbb .wbb-conversion-form i{width: 78%; height: 23px; margin-top: 12px; border: 1px solid rgba(151,184,187,.2); border-radius: 6px;}
.omsag-lp-wbb .wbb-conversion-form b{width: 78%; height: 22px; margin-top: 10px; border-radius: 12px; background: var(--gradient);}
.omsag-lp-wbb .wbb-conversion-node--crm i{border-radius: 50%; background: repeating-linear-gradient(0deg, rgba(111,180,221,.32) 0 2px, transparent 2px 12px);}
.omsag-lp-wbb .wbb-implementation-visual--portal{display: grid; grid-template-columns: 92px 1fr; padding: 18px;}
.omsag-lp-wbb .wbb-portal-sidebar{display: flex; gap: 18px; align-items: center; padding: 23px 17px; border: 1px solid rgba(151,184,187,.15); border-radius: 14px 0 0 14px; background: rgba(8,21,26,.62); flex-direction: column;}
.omsag-lp-wbb .wbb-portal-sidebar b{color: var(--lime); font-size: 15px;}
.omsag-lp-wbb .wbb-portal-sidebar i{width: 39px; height: 7px; border-radius: 6px; background: rgba(151,184,187,.22);}
.omsag-lp-wbb .wbb-portal-sidebar i:nth-of-type(2){background: var(--gradient);}
.omsag-lp-wbb .wbb-portal-main{padding: 23px; border: 1px solid rgba(151,184,187,.15); border-left: 0; border-radius: 0 14px 14px 0; background: rgba(18,37,44,.48);}
.omsag-lp-wbb .wbb-portal-main header{display: flex; justify-content: space-between;}
.omsag-lp-wbb .wbb-portal-main header span{width: 38%; height: 12px; border-radius: 8px; background: #dbe7e4;}
.omsag-lp-wbb .wbb-portal-main header b{width: 31px; height: 31px; border-radius: 50%; background: var(--gradient);}
.omsag-lp-wbb .wbb-portal-kpis{display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 29px;}
.omsag-lp-wbb .wbb-portal-kpis i{height: 78px; border: 1px solid rgba(151,184,187,.16); border-radius: 11px; background: linear-gradient(145deg, rgba(111,180,221,.12), rgba(8,21,26,.28));}
.omsag-lp-wbb .wbb-portal-kpis i:nth-child(2){background: linear-gradient(145deg, rgba(170,211,55,.16), rgba(8,21,26,.28)); animation: wbb-portal-focus 4s ease-in-out infinite;}
.omsag-lp-wbb .wbb-portal-grid{display: grid; grid-template-columns: 1.25fr .75fr; gap: 10px; margin-top: 10px;}
.omsag-lp-wbb .wbb-portal-grid i{height: 143px; border: 1px solid rgba(151,184,187,.16); border-radius: 11px; background: linear-gradient(155deg, transparent 45%, rgba(111,180,221,.24) 46% 48%, transparent 49%), rgba(8,21,26,.28);}
.omsag-lp-wbb .wbb-portal-grid i:nth-child(3){display: none;}
.omsag-lp-wbb .wbb-implementation-visual--integration{overflow: visible;}
.omsag-lp-wbb .wbb-integration-core{position: absolute; z-index: 3; top: 50%; left: 50%; display: flex; width: 138px; height: 138px; align-items: center; justify-content: center; border: 1px solid rgba(170,211,55,.4); border-radius: 50%; background: radial-gradient(circle, rgba(170,211,55,.17), rgba(14,31,37,.94) 67%); color: #edf5f2; transform: translate(-50%,-50%); flex-direction: column; box-shadow: 0 0 0 13px rgba(170,211,55,.025), 0 0 50px rgba(80,170,60,.12);}
.omsag-lp-wbb .wbb-integration-core span{font-size: 23px; font-weight: 800; letter-spacing: -.05em;}
.omsag-lp-wbb .wbb-integration-core strong{color: var(--lime); font-size: 13px; letter-spacing: .08em;}
.omsag-lp-wbb .wbb-integration-core i{width: 38px; height: 3px; margin-top: 13px; border-radius: 4px; background: var(--gradient); animation: wbb-integration-core 2s ease-in-out infinite;}
.omsag-lp-wbb .wbb-integration-system{position: absolute; z-index: 2; display: flex; width: 125px; height: 76px; align-items: center; justify-content: center; border: 1px solid rgba(151,184,187,.22); border-radius: 14px; background: rgba(10,24,29,.86); color: #e8f0ee; flex-direction: column;}
.omsag-lp-wbb .wbb-integration-system b{font-size: 14px;}
.omsag-lp-wbb .wbb-integration-system small{margin-top: 3px; color: #81939a; font-size: 13px;}
.omsag-lp-wbb .wbb-integration-system--one{top: 42px; left: 40px;}
.omsag-lp-wbb .wbb-integration-system--two{top: 42px; right: 40px;}
.omsag-lp-wbb .wbb-integration-system--three{bottom: 42px; left: 40px;}
.omsag-lp-wbb .wbb-integration-system--four{right: 40px; bottom: 42px;}
.omsag-lp-wbb .wbb-integration-line{position: absolute; z-index: 1; top: 50%; left: 50%; width: 31%; height: 1px; background: linear-gradient(90deg, rgba(111,180,221,.2), var(--lime)); transform-origin: left center;}
.omsag-lp-wbb .wbb-integration-line::after{position: absolute; right: 38%; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); content: ""; transform: translateY(-3px); animation: wbb-connection-dot 2.2s linear infinite;}
.omsag-lp-wbb .wbb-integration-line--one{transform: rotate(215deg);}
.omsag-lp-wbb .wbb-integration-line--two{transform: rotate(-35deg);}
.omsag-lp-wbb .wbb-integration-line--three{transform: rotate(145deg);}
.omsag-lp-wbb .wbb-integration-line--four{transform: rotate(35deg);}
.omsag-lp-wbb .wbb-implementation-progress{position: absolute; z-index: 4; right: clamp(28px,4vw,62px); bottom: 24px; left: calc(22% + clamp(28px,4vw,62px)); display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;}
.omsag-lp-wbb .wbb-implementation-progress > i{height: 3px; overflow: hidden; border-radius: 3px; background: rgba(151,184,187,.14);}
.omsag-lp-wbb .wbb-implementation-progress > i b{display: block; width: 25%; height: 100%; border-radius: inherit; background: var(--icon-gradient); transition: width .55s var(--ease);}
.omsag-lp-wbb .wbb-implementation-progress span{min-width: 48px; color: #819299; font-size: 13px; font-weight: 600;}
.omsag-lp-wbb .wbb-implementation-footer{display: flex; align-items: center; gap: 28px; margin-top: 22px;}
.omsag-lp-wbb .wbb-implementation-footer p{display: flex; align-items: center; gap: 10px; margin: 0; color: var(--soft); font-size: 14px;}
.omsag-lp-wbb .wbb-implementation-footer p span{color: var(--brand); font-size: 18px;}
/* Full-screen concept examples */

body.omsag-wbb-modal-open{overflow: hidden;}
.omsag-lp-wbb .wbb-example-dialog{width: min(1380px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; overflow: hidden; border: 1px solid #354950; border-radius: 24px; background: #122027; color: #f2f6f5; box-shadow: 0 45px 130px rgba(2,11,15,.58);}
.omsag-lp-wbb .wbb-example-dialog[open]{animation: wbb-example-dialog-in .45s var(--ease) both;}
.omsag-lp-wbb .wbb-example-dialog::backdrop{background: rgba(8,18,22,.72); backdrop-filter: blur(12px); animation: wbb-example-backdrop-in .35s ease both;}
.omsag-lp-wbb .wbb-example-dialog__shell{display: flex; height: min(870px, calc(100vh - 34px)); min-height: 650px; flex-direction: column;}
.omsag-lp-wbb .wbb-example-dialog__header{display: flex; min-height: 98px; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 26px 19px 32px; border-bottom: 1px solid rgba(151,184,187,.15);}
.omsag-lp-wbb .wbb-example-dialog__header p{margin: 0 0 5px; color: var(--lime); font-size: 13px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;}
.omsag-lp-wbb .wbb-example-dialog__header h2{margin: 0; font-size: clamp(25px,2.5vw,38px); letter-spacing: -.035em; line-height: 1;}
.omsag-lp-wbb .wbb-example-dialog__header button{display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(151,184,187,.24); border-radius: 50%; background: rgba(255,255,255,.035); color: #eaf1ef; font-size: 29px; line-height: 1; cursor: pointer; transition: border-color .25s ease, background .25s ease, transform .25s var(--ease);}
.omsag-lp-wbb .wbb-example-dialog__header button:hover{border-color: var(--lime); background: rgba(170,211,55,.08); transform: rotate(4deg);}
.omsag-lp-wbb .wbb-example-dialog__body{display: grid; min-height: 0; grid-template-columns: minmax(250px,322px) minmax(0,1fr); grid-template-rows: minmax(0,1fr); gap: 24px; padding: 24px 28px; flex: 1;}
.omsag-lp-wbb .wbb-example-dialog__copy{display: flex; min-width: 0; padding: 13px 3px 5px; flex-direction: column;}
.omsag-lp-wbb .wbb-example-dialog__text{min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(151,184,187,.35) transparent; scrollbar-width: thin;}
.omsag-lp-wbb .wbb-example-dialog__text[hidden]{display: none !important;}
.omsag-lp-wbb .wbb-example-dialog__text::-webkit-scrollbar{width: 5px;}
.omsag-lp-wbb .wbb-example-dialog__text::-webkit-scrollbar-thumb{border-radius: 5px; background: rgba(151,184,187,.3);}
.omsag-lp-wbb .wbb-example-dialog__copy > p,
.omsag-lp-wbb .wbb-example-dialog__text > p{margin: 0; color: #a3b0b5; font-size: 15px; line-height: 1.55;}
/* Kundenzeile */
.omsag-lp-wbb .wbb-example-client{margin: 0 0 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(151,184,187,.14);}
.omsag-lp-wbb .wbb-example-client strong{display: block; color: #f2f6f5; font-size: 17px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25;}
.omsag-lp-wbb .wbb-example-client small{display: block; margin-top: 4px; color: #7f9198; font-size: 13px; line-height: 1.4;}
/* Kennzahlen */
.omsag-lp-wbb .wbb-example-kpis{display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 26px 0 0; padding: 0; list-style: none;}
.omsag-lp-wbb .wbb-example-kpis li{min-width: 0; padding: 11px 12px; border: 1px solid rgba(170,211,55,.22); border-radius: 12px; background: rgba(170,211,55,.06);}
.omsag-lp-wbb .wbb-example-kpis b{display: block; color: var(--lime); font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1;}
.omsag-lp-wbb .wbb-example-kpis span{display: block; margin-top: 3px; color: #9fb0b6; font-size: 12.5px; line-height: 1.3;}
.omsag-lp-wbb .wbb-example-dialog__copy dl{display: grid; gap: 0; margin: 20px 0 0;}
.omsag-lp-wbb .wbb-example-dialog__copy dl div{padding: 13px 0; border-top: 1px solid rgba(151,184,187,.14);}
.omsag-lp-wbb .wbb-example-dialog__copy dt{margin-bottom: 5px; color: #72858c; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;}
.omsag-lp-wbb .wbb-example-dialog__copy dd{margin: 0; color: #edf3f1; font-size: 14px; line-height: 1.4;}
.omsag-lp-wbb .wbb-example-dialog__cta{display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: auto; padding: 16px 17px; border: 1px solid rgba(170,211,55,.28); border-radius: 13px; background: rgba(170,211,55,.07); color: #f1f6f4; font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .25s ease, background .25s ease;}
.omsag-lp-wbb .wbb-example-dialog__cta:hover{border-color: var(--lime); background: rgba(170,211,55,.12);}
.omsag-lp-wbb .wbb-example-dialog__cta span{color: var(--lime); font-size: 17px;}
.omsag-lp-wbb .wbb-example-dialog__stage{position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 0; border-radius: 18px; background: #e9eeeb; box-shadow: 0 30px 70px -48px #000;}
.omsag-lp-wbb .wbb-example-screen{position: absolute; inset: 0; min-width: 0; overflow: hidden; color: #202730;}
.omsag-lp-wbb .wbb-example-screen[hidden]{display: none !important;}
.omsag-lp-wbb .wbb-example-screen.is-active{animation: wbb-example-screen-in .65s var(--ease) both;}
.omsag-lp-wbb .wbb-example-dialog__footer{display: flex; min-height: 68px; align-items: center; justify-content: flex-end; gap: 26px; padding: 10px 28px; border-top: 1px solid rgba(151,184,187,.15);}
.omsag-lp-wbb .wbb-example-dialog__footer p{display: grid; min-width: 230px; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; margin: 0; color: #82939a; font-size: 13px;}
.omsag-lp-wbb .wbb-example-dialog__footer p > span{color: var(--lime); font-weight: 700;}
.omsag-lp-wbb .wbb-example-dialog__footer p i{height: 3px; overflow: hidden; border-radius: 3px; background: rgba(151,184,187,.15);}
.omsag-lp-wbb .wbb-example-dialog__footer p i b{display: block; width: 25%; height: 100%; border-radius: inherit; background: var(--icon-gradient); transition: width .45s var(--ease);}
.omsag-lp-wbb .wbb-example-dialog__footer > div{display: flex; gap: 8px;}
.omsag-lp-wbb .wbb-example-dialog__footer button{display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(151,184,187,.22); border-radius: 50%; background: transparent; color: #edf3f1; font-size: 17px; cursor: pointer; transition: border-color .25s ease, color .25s ease;}
.omsag-lp-wbb .wbb-example-dialog__footer button:hover{border-color: var(--lime); color: var(--lime);}
/* Website example */
.omsag-lp-wbb .wbb-example-screen--website{background: #f2f4ef;}
/* Landingpage example */
.omsag-lp-wbb .wbb-example-screen--landing{background: #f5f5f0;}
/* Portal example */
.omsag-lp-wbb .wbb-example-screen--portal{display: grid; grid-template-columns: 72px 1fr; background: #e8efeb;}
/* Integration example */
.omsag-lp-wbb .wbb-example-screen--integration{padding: clamp(22px,3vw,38px); background: radial-gradient(circle at 50% 42%,rgba(80,170,60,.16),transparent 28%),radial-gradient(circle at 15% 80%,rgba(111,180,221,.14),transparent 31%),#101e24; color: #eef4f2;}
.omsag-lp-wbb .wbb-example-screen--integration > header{display: flex; align-items: flex-start; justify-content: space-between;}
.omsag-lp-wbb .wbb-example-screen--integration > header small{color: var(--lime); font-size: 13px; font-weight: 700; letter-spacing: .12em;}
.omsag-lp-wbb .wbb-example-screen--integration > header h3{margin: 6px 0 0; font-size: clamp(27px,3vw,44px); letter-spacing: -.045em;}
.omsag-lp-wbb .wbb-example-screen--integration > header > span{padding: 8px 11px; border: 1px solid rgba(170,211,55,.26); border-radius: 19px; color: #a8bab5; font-size: 13px;}
.omsag-lp-wbb .wbb-example-screen--integration > footer{display: grid; min-height: 67px; grid-template-columns: 1fr repeat(3,auto); gap: 12px; align-items: center; padding: 10px 15px; border: 1px solid rgba(151,184,187,.17); border-radius: 13px; background: rgba(14,31,37,.68);}
.omsag-lp-wbb .wbb-example-screen--integration > footer > span{display: flex; align-items: center; gap: 8px; color: #b8c6c2; font-size: 13px;}
.omsag-lp-wbb .wbb-example-screen--integration > footer > span i{width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime);}
.omsag-lp-wbb .wbb-example-screen--integration > footer > div{min-width: 82px; padding-left: 13px; border-left: 1px solid rgba(151,184,187,.15);}
.omsag-lp-wbb .wbb-example-screen--integration > footer b{display: block; color: #eef4f2; font-size: 16px;}
.omsag-lp-wbb .wbb-example-screen--integration > footer small{color: #819299; font-size: 13px;}
/* Scrollable screenshot previews */
.omsag-lp-wbb .wbb-example-screen[data-example-image],
.omsag-lp-wbb .wbb-example-screen.is-unavailable{display: block; padding: 0; background: #e9eeeb; color: var(--ink);}
.omsag-lp-wbb .wbb-example-scroll-frame{position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; background: #eef2ef; scroll-behavior: auto; scrollbar-width: none; overscroll-behavior: contain;}
.omsag-lp-wbb .wbb-example-scroll-frame::-webkit-scrollbar{width: 0; height: 0;}
/* Eigene Bildlaufleiste: liegt auf dem Bild, 7px vom rechten Rand */
.omsag-lp-wbb .wbb-example-bar{position: absolute; z-index: 4; top: 7px; right: 7px; bottom: 7px; width: 4px; border-radius: 4px; background: rgba(20,28,32,.12); opacity: 0; pointer-events: none; transition: opacity .3s ease;}
.omsag-lp-wbb .wbb-example-screen.is-active .wbb-example-bar{opacity: 1;}
.omsag-lp-wbb .wbb-example-bar i{position: absolute; top: 0; left: 0; width: 100%; height: 0; border-radius: inherit; background: #fff; box-shadow: 0 0 0 1px rgba(15,22,26,.22), 0 2px 6px rgba(15,22,26,.22);}
.omsag-lp-wbb .wbb-example-scroll-frame img{display: block; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top center;}
.omsag-lp-wbb .wbb-example-scroll-frame > span{position: sticky; z-index: 3; top: calc(100% - 55px); display: flex; width: max-content; align-items: center; gap: 9px; margin: 0 auto -43px; padding: 10px 13px; border: 1px solid rgba(226,239,235,.2); border-radius: 24px; background: rgba(16,31,37,.82); color: #eff5f3; font-size: 13px; font-weight: 600; pointer-events: none; backdrop-filter: blur(12px); transition: opacity .3s ease, transform .3s var(--ease);}
.omsag-lp-wbb .wbb-example-scroll-frame > span i{color: var(--lime); font-size: 15px; font-style: normal; animation: wbb-screenshot-hint 1.5s ease-in-out infinite;}
.omsag-lp-wbb .wbb-example-scroll-frame.is-scrolling > span,
.omsag-lp-wbb .wbb-example-scroll-frame:not(.is-at-top) > span{opacity: 0; transform: translateY(8px);}
.omsag-lp-wbb .wbb-example-coming-soon{position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 30px; background: radial-gradient(circle at 50% 40%,rgba(170,211,55,.13),transparent 30%),#15242b; color: #eff5f3; text-align: center; flex-direction: column;}
.omsag-lp-wbb .wbb-example-coming-soon[hidden]{display: none !important;}
.omsag-lp-wbb .wbb-example-coming-soon > i{display: grid; width: 66px; height: 66px; place-items: center; margin-bottom: 19px; border: 1px solid rgba(170,211,55,.35); border-radius: 18px; background: rgba(170,211,55,.08); color: var(--lime); font-size: 31px; font-style: normal;}
.omsag-lp-wbb .wbb-example-coming-soon strong{font-size: clamp(24px,3vw,38px); letter-spacing: -.035em;}
.omsag-lp-wbb .wbb-example-coming-soon p{max-width: 37ch; margin: 10px 0 0; color: #91a1a7; font-size: 14px; line-height: 1.5;}
.omsag-lp-wbb [data-example-open].wbb-example-unavailable{display: none !important;}
/* Video statt Screenshot — nichts scrollt, das Bild bleibt vollstaendig sichtbar */
.omsag-lp-wbb .wbb-example-screen--video{display: grid; padding: 0; background: #0d181d; place-items: center;}
.omsag-lp-wbb .wbb-example-video{display: block; width: 100%; height: 100%; background: #0d181d; cursor: pointer; object-fit: contain;}
.omsag-lp-wbb .wbb-example-video::-webkit-media-controls,
.omsag-lp-wbb .wbb-example-video::-webkit-media-controls-start-playback-button,
.omsag-lp-wbb .wbb-example-video::-webkit-media-controls-panel{display: none !important; -webkit-appearance: none;}
.omsag-lp-wbb .wbb-example-video:focus-visible{outline: 2px solid var(--lime); outline-offset: -3px;}
@media (max-width: 1180px) {
.omsag-lp-wbb .wbb-implementation-showcase{grid-template-columns: minmax(240px, 25%) 1fr;}
.omsag-lp-wbb .wbb-implementation-panel{grid-template-columns: minmax(220px,.72fr) minmax(330px,1.28fr); gap: 28px; padding-right: 30px; padding-left: 30px;}
.omsag-lp-wbb .wbb-implementation-progress{left: calc(25% + 30px);}
.omsag-lp-wbb .wbb-implementation-visual--conversion{gap: 4px; padding: 20px 14px;}
.omsag-lp-wbb .wbb-conversion-node,
.omsag-lp-wbb .wbb-conversion-page,
.omsag-lp-wbb .wbb-conversion-form{padding-right: 8px; padding-left: 8px;}
}
@media (max-width: 960px) {
.omsag-lp-wbb .wbb-implementation-showcase{min-height: 0; grid-template-columns: 1fr;}
.omsag-lp-wbb .wbb-implementation-nav{grid-template-rows: none; grid-template-columns: repeat(4,minmax(205px,1fr)); overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid rgba(151,184,187,.15); scrollbar-width: none;}
.omsag-lp-wbb .wbb-implementation-nav::-webkit-scrollbar{display: none;}
.omsag-lp-wbb .wbb-implementation-nav button{min-height: 82px; border-right: 1px solid rgba(151,184,187,.12); border-bottom: 0;}
.omsag-lp-wbb .wbb-implementation-nav button:last-child{border-right: 0;}
.omsag-lp-wbb .wbb-implementation-stage{min-height: 570px;}
.omsag-lp-wbb .wbb-implementation-panel{min-height: 470px; grid-template-columns: minmax(220px,.72fr) minmax(330px,1.28fr); padding: 28px 24px 58px;}
.omsag-lp-wbb .wbb-implementation-progress{right: 24px; left: 24px;}
.omsag-lp-wbb .wbb-implementation-visual{height: 340px;}
.omsag-lp-wbb .wbb-implementation-visual--conversion{grid-template-columns: 1fr 18px 1.05fr 18px 1fr 18px .8fr; padding: 20px 12px;}
.omsag-lp-wbb .wbb-conversion-node,
.omsag-lp-wbb .wbb-conversion-page,
.omsag-lp-wbb .wbb-conversion-form{min-height: 145px;}
.omsag-lp-wbb .wbb-integration-system--one,
.omsag-lp-wbb .wbb-integration-system--three{left: 22px;}
.omsag-lp-wbb .wbb-integration-system--two,
.omsag-lp-wbb .wbb-integration-system--four{right: 22px;}
.omsag-lp-wbb .wbb-example-dialog__body{grid-template-columns: minmax(0,250px) minmax(0,1fr); gap: 18px; padding: 18px;}
.omsag-lp-wbb .wbb-example-dialog__copy{padding-top: 5px;}
.omsag-lp-wbb .wbb-example-dialog__copy dl div{padding: 12px 0;}
}
@media (max-width: 700px) {
.omsag-lp-wbb .wbb-implementation-showcase{border-radius: 20px;}
.omsag-lp-wbb .wbb-implementation-nav{grid-template-columns: repeat(4,minmax(178px,1fr));}
.omsag-lp-wbb .wbb-implementation-nav button{min-height: 74px; grid-template-columns: 32px minmax(0,1fr) 25px; gap: 9px; padding: 11px 8px;}
.omsag-lp-wbb .wbb-implementation-nav button.is-active{padding-left: 11px;}
.omsag-lp-wbb .wbb-implementation-nav button span{width: 30px; height: 30px;}
.omsag-lp-wbb .wbb-implementation-nav button strong{font-size: 13px;}
.omsag-lp-wbb .wbb-implementation-nav button i{width: 25px; height: 25px;}
.omsag-lp-wbb .wbb-implementation-stage{min-height: 850px;}
.omsag-lp-wbb .wbb-implementation-panel{min-height: 0; grid-template-columns: 1fr; gap: 24px; align-content: start; padding: 24px 18px 62px;}
.omsag-lp-wbb .wbb-implementation-number{margin-bottom: 15px;}
.omsag-lp-wbb .wbb-implementation-panel h3{max-width: 16ch; font-size: clamp(31px,9vw,42px);}
.omsag-lp-wbb .wbb-platform-pair{grid-template-columns: 1fr;}
.omsag-lp-wbb .wbb-implementation-visual{width: 100%; height: 350px;}
.omsag-lp-wbb .wbb-visual-website-hero{height: 220px; grid-template-columns: 1.15fr .85fr; padding: 20px 17px;}
.omsag-lp-wbb .wbb-visual-website-hero > i{height: 145px;}
.omsag-lp-wbb .wbb-visual-website-modules{height: 90px;}
.omsag-lp-wbb .wbb-implementation-visual--conversion{grid-template-columns: 1fr 14px 1fr; gap: 5px; padding: 20px 12px;}
.omsag-lp-wbb .wbb-implementation-visual--conversion > span:nth-of-type(2),
.omsag-lp-wbb .wbb-implementation-visual--conversion > span:nth-of-type(3),
.omsag-lp-wbb .wbb-conversion-form,
.omsag-lp-wbb .wbb-conversion-node--crm{display: none;}
.omsag-lp-wbb .wbb-conversion-node,
.omsag-lp-wbb .wbb-conversion-page{min-height: 210px;}
.omsag-lp-wbb .wbb-implementation-visual--portal{grid-template-columns: 70px 1fr; padding: 12px;}
.omsag-lp-wbb .wbb-portal-main{padding: 16px 12px;}
.omsag-lp-wbb .wbb-portal-kpis{gap: 6px;}
.omsag-lp-wbb .wbb-portal-grid{grid-template-columns: 1fr;}
.omsag-lp-wbb .wbb-portal-grid i{height: 115px;}
.omsag-lp-wbb .wbb-portal-grid i:nth-child(2){display: none;}
.omsag-lp-wbb .wbb-integration-core{width: 112px; height: 112px;}
.omsag-lp-wbb .wbb-integration-system{width: 98px; height: 68px;}
.omsag-lp-wbb .wbb-integration-system--one,
.omsag-lp-wbb .wbb-integration-system--three{left: 12px;}
.omsag-lp-wbb .wbb-integration-system--two,
.omsag-lp-wbb .wbb-integration-system--four{right: 12px;}
.omsag-lp-wbb .wbb-integration-line{width: 33%;}
.omsag-lp-wbb .wbb-implementation-footer{align-items: flex-start; flex-direction: column;}
.omsag-lp-wbb .wbb-case-link{grid-template-columns: 49px 1fr 23px;}
.omsag-lp-wbb .wbb-example-dialog{width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border-radius: 18px;}
.omsag-lp-wbb .wbb-example-dialog__shell{height: calc(100dvh - 14px); min-height: 0;}
.omsag-lp-wbb .wbb-example-dialog__header{min-height: 80px; padding: 16px 15px 14px 18px;}
.omsag-lp-wbb .wbb-example-dialog__header h2{font-size: 24px;}
.omsag-lp-wbb .wbb-example-dialog__header button{width: 40px; height: 40px;}
.omsag-lp-wbb .wbb-example-dialog__body{display: flex; gap: 17px; padding: 16px 13px; overflow-y: auto; flex-direction: column;}
.omsag-lp-wbb .wbb-example-dialog__copy{padding: 0 3px;}
.omsag-lp-wbb .wbb-example-dialog__copy > p,
.omsag-lp-wbb .wbb-example-dialog__text > p{font-size: 14px;}
.omsag-lp-wbb .wbb-example-dialog__text{overflow: visible;}
.omsag-lp-wbb .wbb-example-dialog__copy dl{margin-top: 20px;}
.omsag-lp-wbb .wbb-example-kpis{margin-top: 22px;}
.omsag-lp-wbb .wbb-example-dialog__cta{align-self: flex-start; margin-top: 13px; padding: 11px 13px;}
.omsag-lp-wbb .wbb-example-dialog__stage{width: 100%; min-height: 485px; flex: 0 0 485px;}
.omsag-lp-wbb .wbb-example-dialog__footer{min-height: 58px; justify-content: space-between; padding: 8px 14px;}
.omsag-lp-wbb .wbb-example-dialog__footer p{min-width: 160px;}
.omsag-lp-wbb .wbb-example-screen--integration{padding: 19px 12px;}
.omsag-lp-wbb .wbb-example-screen--integration > header h3{font-size: 27px;}
.omsag-lp-wbb .wbb-example-screen--integration > header > span{display: none;}
.omsag-lp-wbb .wbb-example-screen--integration > footer{grid-template-columns: 1fr auto;}
.omsag-lp-wbb .wbb-example-screen--integration > footer > div:nth-of-type(2),
.omsag-lp-wbb .wbb-example-screen--integration > footer > div:nth-of-type(3){display: none;}
}@keyframes wbb-implementation-copy-in {from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; }}
@keyframes wbb-implementation-visual-in {from { opacity: 0; transform: translateX(28px) scale(.975); } to { opacity: 1; transform: none; }}
@keyframes wbb-visual-orbit {0%,100% { transform: rotate(-5deg) scale(.96); } 50% { transform: rotate(6deg) scale(1.03); }}
@keyframes wbb-conversion-pulse {0%,100% { opacity: .35; transform: translateX(-3px); } 50% { opacity: 1; transform: translateX(3px); }}
@keyframes wbb-portal-focus {0%,100% { border-color: rgba(151,184,187,.16); transform: translateY(0); } 50% { border-color: rgba(170,211,55,.48); transform: translateY(-4px); }}
@keyframes wbb-integration-core {0%,100% { opacity: .45; transform: scaleX(.65); } 50% { opacity: 1; transform: scaleX(1); }}
@keyframes wbb-connection-dot {from { right: 4%; } to { right: 92%; }}
@keyframes wbb-example-dialog-in {from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; }}
@keyframes wbb-example-backdrop-in {from { opacity: 0; } to { opacity: 1; }}
@keyframes wbb-example-screen-in {from { opacity: 0; transform: translateX(24px) scale(.985); } to { opacity: 1; transform: none; }}
@keyframes wbb-screenshot-hint {0%,100% { transform: translateY(-2px); } 50% { transform: translateY(3px); }}
/* ── Anpassungen an unsere Typo- und CTA-Regeln ────────────────────────── */
.omsag-lp-wbb .wbb-implementation-showcase,.omsag-lp-wbb .wbb-example-dialog{font-family:var(--font)}
.omsag-lp-wbb .wbb-implementation-number{margin-top:15px}
.omsag-lp-wbb .wbb-implementation-panel h3{font-family:var(--font);font-size:clamp(23px,2.05vw,34px);font-weight:700;
  letter-spacing:-.026em;line-height:1.1;max-width:17ch;color:#f3f7f6;hyphens: manual}
.omsag-lp-wbb .wbb-implementation-nav button strong{font-family:var(--font);font-size:14.5px;font-weight:600;
  overflow-wrap:normal;word-break:normal;hyphens: manual}
.omsag-lp-wbb .wbb-example-dialog__header h2{font-family:var(--font);font-size:clamp(22px,2vw,30px);font-weight:700;
  letter-spacing:-.026em;line-height:1.12;color:#f4f8f7}
.omsag-lp-wbb .wbb-example-dialog__cta{font-family:var(--font);font-weight:600}

/* Kacheln sind Buttons -> wie die Links aus der Vorlage behandeln */
.omsag-lp-wbb .wbb-platform-pair button,
.omsag-lp-wbb .wbb-platform-pair > div{width:100%;font-family:inherit;text-align:left;color:inherit}
.omsag-lp-wbb .wbb-platform-pair button,.omsag-lp-wbb .wbb-case-link{cursor:pointer}
.omsag-lp-wbb .wbb-platform-pair > div{cursor:default}
/* Case-Button in B/C/D exakt wie die Plattform-Kacheln in A.
   Hoehere Spezifitaet noetig, sonst gewinnt der Button-Reset weiter oben. */
.omsag-lp-wbb .wbb-implementation-panel__copy .wbb-case-link{
  display:grid;width:min(100%,360px);min-height:88px;grid-template-columns:46px minmax(0,1fr) 25px;
  gap:13px;align-items:center;margin-top:32px;padding:12px;
  border:1px solid rgba(151,184,187,.18);border-radius:14px;background:rgba(10,24,29,.42);
  color:#eef4f3;font-family:inherit;text-align:left;text-decoration:none;cursor:pointer;
  transition:border-color .25s ease,background .25s ease,transform .25s var(--ez)}
.omsag-lp-wbb .wbb-implementation-panel__copy .wbb-case-link:hover{
  border-color:rgba(170,211,55,.48);background:rgba(170,211,55,.06);transform:translateX(3px)}
.omsag-lp-wbb .wbb-implementation-panel__copy .wbb-case-link strong{font-size:15px;font-weight:700;color:#eff5f3;line-height:1.3}
.omsag-lp-wbb .wbb-implementation-panel__copy .wbb-case-link em{color:var(--bl);font-style:normal}
.omsag-lp-wbb .wbb-implementation-panel__copy .wbb-mini-case{width:44px;height:44px;border-radius:12px}

/* ── Pfeile als SVG: sitzen immer exakt mittig im runden Halter ─────────── */
.omsag-lp-wbb .wbb-implementation-nav button i,
.omsag-lp-wbb .wbb-platform-pair em,
.omsag-lp-wbb .wbb-case-link em,
.omsag-lp-wbb .wbb-example-dialog__footer > div button,
.omsag-lp-wbb .wbb-example-dialog__cta span,
.omsag-lp-wbb .wbb-example-scroll-frame > span i{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.omsag-lp-wbb .wbb-implementation-nav button i svg{width:15px;height:15px}
.omsag-lp-wbb .wbb-platform-pair em svg{width:17px;height:17px}
.omsag-lp-wbb .wbb-case-link em svg{width:17px;height:17px}
.omsag-lp-wbb .wbb-example-dialog__footer > div button svg{width:17px;height:17px}
.omsag-lp-wbb .wbb-example-dialog__cta span svg{width:17px;height:17px}
.omsag-lp-wbb .wbb-example-scroll-frame > span i svg{width:15px;height:15px}
.omsag-lp-wbb .wbb-example-dialog__header button svg{width:20px;height:20px}
.omsag-lp-wbb .wbb-example-dialog__header button{font-size:0}

/* ── Keine Fokus-Rahmen in der Sektion ─────────────────────────────────── */
.omsag-lp-wbb :is(a,button,dialog,[tabindex]):focus,
.omsag-lp-wbb :is(a,button,dialog,[tabindex]):focus-visible,
.omsag-lp-wbb .wbb-implementation-nav button:focus,
.omsag-lp-wbb .wbb-implementation-nav button:focus-visible,
.omsag-lp-wbb .wbb-example-scroll-frame:focus,
.omsag-lp-wbb .wbb-example-scroll-frame:focus-visible{outline:none!important;outline-offset:0!important;box-shadow:none}
.omsag-lp-wbb .wbb-implementation-nav button.is-active span{box-shadow:0 8px 24px -12px rgba(170,211,55,.9)}

/* ── Reveal ────────────────────────────────────────────────────────────── */
.omsag-lp-wbb.wbb-anim .omsag-lp-wbb__overline,.omsag-lp-wbb.wbb-anim .omsag-lp-wbb__headline,
.omsag-lp-wbb.wbb-anim .omsag-lp-wbb__subline,.omsag-lp-wbb.wbb-anim .omsag-lp-wbb__label,
.omsag-lp-wbb.wbb-anim .wbb-implementation-showcase,.omsag-lp-wbb.wbb-anim .omsag-lp-wbb__foot{opacity:0;transform:translateY(18px)}
.omsag-lp-wbb.wbb-anim.is-in .omsag-lp-wbb__overline{animation:wbb-up .6s var(--ez) .02s forwards}
.omsag-lp-wbb.wbb-anim.is-in .omsag-lp-wbb__headline{animation:wbb-up .7s var(--ez) .08s forwards}
.omsag-lp-wbb.wbb-anim.is-in .omsag-lp-wbb__subline{animation:wbb-up .7s var(--ez) .16s forwards}
.omsag-lp-wbb.wbb-anim.is-in .omsag-lp-wbb__label{animation:wbb-up .6s var(--ez) .22s forwards}
.omsag-lp-wbb.wbb-anim.is-in .wbb-implementation-showcase{animation:wbb-up .74s var(--ez) .28s forwards}
.omsag-lp-wbb.wbb-anim.is-in .omsag-lp-wbb__foot{animation:wbb-up .66s var(--ez) .5s forwards}
@keyframes wbb-up{to{opacity:1;transform:none}}

@media(max-width:960px){
  .omsag-lp-wbb .wbb-implementation-nav{position:relative;scroll-snap-type:x mandatory;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.25));
    mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.25))}
  .omsag-lp-wbb .wbb-implementation-nav button{scroll-snap-align:start}
}
@media(max-width:700px){
  /* Die gruene Auswahlflaeche lag bisher bundig auf den Trennstrichen und am
     Kartenrand — sie bekommt seitlich Luft. */
  .omsag-lp-wbb .wbb-implementation-nav button::before{inset:4px 6px;border-radius:14px}
  /* Der linke Innenabstand des Scrollers verschwand beim Einrasten
     (scrollLeft sprang auf die Padding-Breite). scroll-padding haelt ihn frei. */
  .omsag-lp-wbb .wbb-implementation-nav{scroll-padding-inline:10px;
    grid-template-columns:repeat(4,minmax(224px,1fr))}
  /* Ziffer und Pfeil standen nur 2px neben der gruenen Flaeche. Die Karte wird
     etwas breiter, der Inhalt haelt 10px Abstand zum Rahmen — und der
     Einrueck-Sprung beim Aktivieren entfaellt, weil er den Text sonst genau
     in den Rahmen hinein schiebt. */
  .omsag-lp-wbb .wbb-implementation-nav button{padding:12px 16px}
  .omsag-lp-wbb .wbb-implementation-nav button.is-active{padding-left:16px}
  /* Lange Komposita wie "Schnittstellen" liefen sonst aus der Textspalte. */
  .omsag-lp-wbb .wbb-implementation-nav button strong{font-size:13.5px;line-height:1.24}
  /* Die Visuals sind auf dem Handy nur Dekoration und kosten 350px Hoehe. */
  .omsag-lp-wbb .wbb-implementation-visual{display:none}
  .omsag-lp-wbb .wbb-implementation-panel{padding-bottom:52px}
  /* Ohne Visual darf die Buehne auch keine Hoehe mehr dafuer reservieren. */
  .omsag-lp-wbb .wbb-implementation-stage{min-height:0}

  /* Screenshots komplett zeigen: gescrollt wird im Fenster, nicht im Bild. */
  .omsag-lp-wbb [data-case-dialog][data-case-shot="1"] .wbb-example-dialog__stage{
    min-height:0;flex:0 0 auto;overflow:visible;background:transparent;box-shadow:none}
  .omsag-lp-wbb [data-case-dialog][data-case-shot="1"] .wbb-example-screen{position:relative;inset:auto}
  .omsag-lp-wbb [data-case-dialog][data-case-shot="1"] .wbb-example-scroll-frame{
    position:relative;inset:auto;overflow:visible;overscroll-behavior:auto;border-radius:14px}
  .omsag-lp-wbb [data-case-dialog][data-case-shot="1"] .wbb-example-scroll-frame img{
    height:auto;min-height:0;object-fit:contain;border-radius:14px}
  .omsag-lp-wbb [data-case-dialog][data-case-shot="1"] .wbb-example-scroll-frame > span,
  .omsag-lp-wbb [data-case-dialog][data-case-shot="1"] .wbb-example-bar{display:none !important}
}
@media(max-width:640px){
  .omsag-lp-wbb__btn{width:100%;justify-content:space-between}
}

@media(prefers-reduced-motion:reduce){
  .omsag-lp-wbb.wbb-anim [class*="omsag-lp-wbb__"],.omsag-lp-wbb.wbb-anim [class*="wbb-implementation"]{opacity:1!important;transform:none!important;animation:none!important}
  .omsag-lp-wbb .wbb-implementation-visual *,.omsag-lp-wbb .wbb-example-dialog,.omsag-lp-wbb .wbb-example-screen{animation:none!important}
}

.omsag-lp-wbb :is(h1,h2,h3,p,li,span,strong,b,em,dt,dd){overflow-wrap:break-word}