*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#18384e;background:#fff}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.shell{width:min(1240px,calc(100% - 40px));margin:auto}.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(20px);border-bottom:1px solid rgba(70,145,180,.15)}.navrow{height:84px;display:flex;align-items:center;gap:18px}.brand{display:flex;align-items:center;flex:0 0 auto}.brand img{width:170px;height:58px;object-fit:contain;object-position:left}.nav{display:flex;align-items:center;gap:4px;min-width:0}.nav.primary{margin-left:8px;margin-right:auto}.nav.utility{margin-left:auto}.navitem{position:relative}.navlink{display:flex;align-items:center;gap:5px;padding:15px 9px;border-radius:12px;font-weight:700;font-size:13px;color:#315a72;white-space:nowrap}.navlink:hover,.navitem:focus-within>.navlink{color:#1685b9;background:#f1faff}.chev{font-size:10px;opacity:.75}.dropdown{display:none;position:absolute;top:calc(100% + 7px);left:0;min-width:290px;padding:10px;border-radius:18px;background:rgba(255,255,255,.98);border:1px solid rgba(80,160,200,.18);box-shadow:0 24px 65px rgba(30,90,120,.18);backdrop-filter:blur(20px)}.navitem:hover>.dropdown,.navitem:focus-within>.dropdown,.navitem.open>.dropdown{display:block}.dropdown a{display:block;padding:12px 13px;border-radius:11px;color:#345f76;font-weight:650;font-size:14px}.dropdown a small{display:block;margin-top:3px;color:#82a0b0;font-weight:500}.dropdown a:hover{background:#edf9fe;color:#1685b9}.glass{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 17px;border:1px solid rgba(255,255,255,.9);border-radius:15px;background:linear-gradient(135deg,rgba(91,193,235,.78),rgba(134,223,255,.70));color:#fff;font-weight:800;box-shadow:0 12px 32px rgba(62,163,209,.19),inset 0 1px 0 rgba(255,255,255,.75);backdrop-filter:blur(14px)}.glass:hover{transform:translateY(-1px);box-shadow:0 16px 38px rgba(62,163,209,.25)}.hero{padding:80px 0 90px;background:radial-gradient(circle at 78% 18%,rgba(134,223,255,.32),transparent 31%),linear-gradient(180deg,#fff,#edf9fe)}.heroGrid{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center}.k{margin:0 0 10px;color:#35a4d5;font-weight:850;text-transform:uppercase;letter-spacing:.11em;font-size:12px}.hero h1,.pageHero h1{font-size:clamp(52px,7vw,92px);line-height:.94;letter-spacing:-.055em;margin:12px 0;color:#173b55}.hero h1 span{background:linear-gradient(90deg,#4177a7,#55b8e4,#86dfff);-webkit-background-clip:text;color:transparent}.lead,.pageHero p{font-size:19px;line-height:1.7;color:#688497;max-width:710px}.heroActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.ghost{display:inline-flex;align-items:center;padding:0 17px;min-height:44px;border:1px solid rgba(65,145,185,.18);border-radius:15px;background:rgba(255,255,255,.72);color:#337496;font-weight:750}.heroVisual{position:relative;min-height:470px;border-radius:32px;overflow:hidden;box-shadow:0 30px 85px rgba(47,119,153,.18);background:#dff4fc}.heroVisual img{width:100%;height:470px;object-fit:cover}.heroVisual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(14,55,78,.7))}.heroVisualText{position:absolute;z-index:2;bottom:28px;left:30px;color:white}.heroVisualText strong{font-size:30px}.section{padding:88px 0}.soft{background:linear-gradient(180deg,#eefaff,#fbfeff 50%,#edf9fe)}.center{max-width:850px;margin:0 auto 42px;text-align:center}.center h2,.sectionTitle{font-size:clamp(38px,5vw,64px);line-height:1.02;letter-spacing:-.045em;margin:0 0 15px;color:#173b55}.center p{font-size:18px;line-height:1.65;color:#6d8798}.worldGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.worldCard,.serviceCard{position:relative;overflow:hidden;border-radius:28px;border:1px solid rgba(70,148,187,.16);background:#fff;box-shadow:0 18px 54px rgba(62,125,155,.10);transition:.35s}.worldCard{min-height:410px}.worldCard:hover,.serviceCard:hover{transform:translateY(-6px);box-shadow:0 24px 62px rgba(62,125,155,.15)}.worldCard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.7s}.worldCard:hover img,.serviceCard:hover img{transform:scale(1.04)}.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,53,74,.02),rgba(15,53,74,.84))}.worldText{position:absolute;z-index:2;bottom:0;left:0;right:0;padding:30px;color:#fff}.worldText h3{font-size:36px;margin:6px 0 8px}.worldText p{margin:0 0 12px;color:#e8f8ff;line-height:1.55}.worldText b{color:#d7f6ff}.serviceGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.serviceGrid.two{grid-template-columns:repeat(2,1fr)}.serviceCard img{width:100%;height:220px;object-fit:cover;transition:.7s}.serviceBody{padding:24px}.serviceBody h3{font-size:27px;margin:0 0 9px}.serviceBody p{color:#6d8798;line-height:1.6;margin:0 0 14px}.serviceBody b{color:#218dc0}.pageHero{padding:72px 0;background:radial-gradient(circle at 80% 20%,rgba(134,223,255,.35),transparent 31%),linear-gradient(180deg,#fff,#eaf8fe)}.pageHero h1{font-size:clamp(50px,7vw,82px)}.crumbs{font-size:13px;color:#5c91aa;margin-bottom:24px}.featureGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature{padding:26px;border-radius:22px;border:1px solid rgba(70,148,187,.16);background:#fff;box-shadow:0 12px 36px rgba(62,125,155,.08)}.feature span{display:block;color:#4faed8;font-weight:850;font-size:12px;letter-spacing:.09em}.feature h3{margin:10px 0 0;font-size:22px}.ctaBand{padding:38px;border-radius:30px;background:linear-gradient(135deg,rgba(206,242,255,.88),rgba(241,251,255,.94));border:1px solid rgba(77,162,203,.18);display:flex;align-items:center;justify-content:space-between;gap:24px}.ctaBand h2{font-size:36px;margin:0 0 8px}.ctaBand p{margin:0;color:#668397}.formGrid{display:grid;grid-template-columns:1.35fr .65fr;gap:24px}.formCard,.contactCard,.loginCard{padding:30px;border-radius:28px;border:1px solid rgba(72,157,199,.16);background:rgba(255,255,255,.82);box-shadow:0 24px 70px rgba(68,132,163,.11)}form{display:grid;gap:17px}.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:grid;gap:7px;color:#385c72;font-size:13px;font-weight:750}input,select,textarea{width:100%;border:1px solid rgba(75,148,186,.20);border-radius:14px;background:#fbfeff;padding:13px 14px;color:#23485f}textarea{resize:vertical}.contactCard img{width:190px;max-width:100%}.contactCard a{display:block;color:#218dc0;font-weight:750;margin-top:10px}.loginGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.loginCard h2{font-size:28px}.loginCard p{color:#688497;line-height:1.6}.footer{background:linear-gradient(180deg,#dff5ff,#cceeff);padding:62px 0 24px;border-top:1px solid rgba(56,150,193,.15)}.footGrid{display:grid;grid-template-columns:1.25fr repeat(3,1fr);gap:34px}.footLogo{width:190px}.footer h4{margin:8px 0 14px}.footer a{display:block;color:#496f84;margin:8px 0;font-size:14px}.footer p{color:#5f8092;line-height:1.6}.copy{margin-top:40px;padding-top:20px;border-top:1px solid rgba(56,150,193,.17);display:flex;justify-content:space-between;color:#628397;font-size:13px}.connectArt{position:absolute;inset:0;width:100%;height:100%;display:block;transition:.7s}
.connectCard:hover .connectArt{transform:scale(1.04)}
.connectArt circle[r="6"],.connectArt circle[r="7"],.connectArt circle[r="8"],.connectArt circle[r="9"],.connectArt circle[r="5"]{animation:connectPulse 2.6s ease-in-out infinite}
.connectArt circle:nth-of-type(2n){animation-delay:-1.1s}
.connectArt circle:nth-of-type(3n){animation-delay:-1.8s}
@keyframes connectPulse{0%,100%{opacity:.75;r:6}50%{opacity:1;r:8}}
.gradTitle{background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important;display:inline-block}
.gradTealNavy{background-image:linear-gradient(90deg,#173b55,#1f8fa8,#3fd6b4)}
.gradSilverBlue{background-image:linear-gradient(90deg,#5b6b7a,#8fa8b8,#55b8e4)}
.gradOrangeGreen{background-image:linear-gradient(90deg,#ff9a3d,#ffb84f,#5bc46a)}
.gradVioletBlue{background-image:linear-gradient(90deg,#7c6cff,#5e86ff,#55b8e4)}
.gradHeroSky{background-image:linear-gradient(90deg,#766cff 0%,#687fff 30%,#5c99f5 62%,#59a9eb 100%)}
.mobileToggle{display:none;border:0;background:transparent;font-size:26px;color:#315a72}.fade{animation:fade .5s ease both}@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:1180px){.nav.primary,.nav.utility{display:none}.mobileToggle{display:block;margin-left:auto}.navrow.mobile-open{height:auto;min-height:84px;align-items:flex-start;flex-wrap:wrap;padding:12px 0 18px}.navrow.mobile-open .nav{display:flex;width:100%;flex-direction:column;align-items:stretch}.navrow.mobile-open .navitem{width:100%}.navrow.mobile-open .dropdown{position:static;box-shadow:none;margin:0 0 8px 14px}.navrow.mobile-open .navlink{justify-content:space-between}.heroGrid{grid-template-columns:1fr}.heroVisual{min-height:380px}.serviceGrid,.featureGrid{grid-template-columns:repeat(2,1fr)}.footGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.shell{width:min(100% - 26px,1240px)}.brand img{width:145px}.hero{padding-top:54px}.hero h1,.pageHero h1{font-size:48px}.worldGrid,.serviceGrid,.serviceGrid.two,.featureGrid,.formGrid,.loginGrid,.row{grid-template-columns:1fr}.worldCard{min-height:360px}.heroVisual,.heroVisual img{height:330px;min-height:330px}.ctaBand{align-items:flex-start;flex-direction:column}.footGrid{grid-template-columns:1fr}.copy{flex-direction:column;gap:8px}.section{padding:66px 0}}
/* V11 navigation + mega menus */
.nav.primary{gap:2px}.navlink{padding:15px 12px;font-size:14px}.chev{font-size:14px;transition:transform .2s}.navitem:hover>.navlink .chev,.navitem:focus-within>.navlink .chev,.navitem.open>.navlink .chev{transform:rotate(180deg)}
.megaItem{position:relative}.megaItem:after{content:"";position:absolute;left:0;right:0;top:100%;height:18px}.dropdown.mega{display:block;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(9px);top:calc(100% + 10px);left:-120px;width:720px;min-width:720px;padding:16px;grid-template-columns:230px 1fr;gap:14px;border-radius:24px;transition:opacity .18s ease,transform .18s ease,visibility .18s;background:rgba(255,255,255,.96)}
.megaItem.open>.mega{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0);display:grid}.mega.megaRight{left:auto;right:-140px}.megaIntro{padding:20px;border-radius:18px;background:linear-gradient(145deg,#e8f8ff,#f8fdff);border:1px solid rgba(79,174,216,.14)}.megaIntro span{font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.1em;color:#42a7d4}.megaIntro strong{display:block;font-size:27px;letter-spacing:-.03em;color:#173b55;margin:7px 0}.megaIntro p{font-size:13px;line-height:1.55;color:#6c899a;margin:0 0 16px}.megaOverview{font-size:13px!important;font-weight:800!important;color:#218dc0!important;padding:0!important}.megaLinks{display:grid;grid-template-columns:1fr 1fr;gap:7px}.megaLinks a{padding:16px!important;border:1px solid transparent}.megaLinks a:hover{border-color:rgba(73,166,209,.13);background:#f1faff}.megaLinks b{display:block;font-size:15px;color:#2e5c74}.megaLinks small{font-size:12px!important;line-height:1.4}
/* Hero prepared for a future local background video */
.hero.videoReady{position:relative;isolation:isolate;overflow:hidden;padding:92px 0 104px;background:#eefaff}.heroMedia{position:absolute;z-index:-2;inset:0}.heroMedia video,.heroFallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.heroFallback{display:none}.heroMedia video{z-index:-1}.heroWash{position:absolute;inset:0;background:linear-gradient(90deg,rgba(250,254,255,.96) 0%,rgba(244,252,255,.88) 48%,rgba(225,247,255,.64) 100%),radial-gradient(circle at 80% 25%,rgba(134,223,255,.34),transparent 34%)}.hero.videoReady .heroGrid{grid-template-columns:1.08fr .62fr;min-height:480px}.heroCopy{align-self:center}.heroGlassNote{align-self:end;margin-bottom:10px;padding:22px;border:1px solid rgba(255,255,255,.78);background:rgba(255,255,255,.42);border-radius:22px;backdrop-filter:blur(18px);box-shadow:0 18px 52px rgba(68,132,163,.11)}.heroGlassNote span{display:block;color:#35a4d5;font-weight:850;font-size:11px;letter-spacing:.12em}.heroGlassNote strong{display:block;font-size:22px;color:#244f67;margin:7px 0}.heroGlassNote p{margin:0;color:#6b8798;font-size:13px;line-height:1.55}.heroGlassNote code{font-size:11px}
/* Home contact */
.contactHome{background:linear-gradient(180deg,#fbfeff,#eaf8fe)}.contactIntro{max-width:760px;margin-bottom:34px}.contactIntro p:not(.k){font-size:18px;line-height:1.65;color:#6d8798}.glassPanel{background:rgba(255,255,255,.7);backdrop-filter:blur(18px)}.formActions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.formActions span{font-size:12px;color:#7893a2}.contactAside{background:linear-gradient(145deg,rgba(220,246,255,.9),rgba(255,255,255,.92));align-self:start;position:sticky;top:112px}.contactAside h3{font-size:26px;margin:18px 0 8px;color:#214d65}.miniGlass{display:inline-flex!important;margin-top:20px!important;padding:12px 15px;border-radius:14px;background:rgba(111,207,242,.18);border:1px solid rgba(90,184,224,.22)}
@media(max-width:1180px){.dropdown.mega{position:static;width:100%;min-width:0;display:none!important;visibility:visible;opacity:1;pointer-events:auto;transform:none;margin:0 0 8px 0;grid-template-columns:1fr}.navitem.open>.dropdown.mega{display:grid!important}.megaLinks{grid-template-columns:1fr 1fr}.megaItem:after{display:none}.hero.videoReady .heroGrid{grid-template-columns:1fr}.heroGlassNote{max-width:520px}}
@media(max-width:760px){.megaLinks{grid-template-columns:1fr}.hero.videoReady{padding-top:60px}.hero.videoReady .heroGrid{min-height:520px}.contactAside{position:static}}
/* V12: neutraler Glass-CTA statt kräftigem Blau */
.glass{
color:#244c63;
border:1px solid rgba(255,255,255,.9);
background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(232,246,251,.66));
box-shadow:0 12px 32px rgba(43,94,119,.11),inset 0 1px 0 rgba(255,255,255,.92);
backdrop-filter:blur(18px) saturate(125%);
-webkit-backdrop-filter:blur(18px) saturate(125%);
}
.glass:hover{
color:#173f56;
background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(221,242,250,.78));
box-shadow:0 16px 38px rgba(43,94,119,.16),inset 0 1px 0 rgba(255,255,255,.95);
}
/* Video bewusst weich halten, damit Typografie im Vordergrund bleibt */
.heroMedia video{filter:saturate(.78) brightness(1.08) contrast(.93);transform:scale(1.02)}
.heroWash{background:linear-gradient(90deg,rgba(252,254,255,.95) 0%,rgba(247,252,254,.88) 44%,rgba(234,247,251,.63) 100%),radial-gradient(circle at 82% 22%,rgba(170,228,246,.24),transparent 36%)}
/* V13 refinements */
.firstTalk, .firstTalk:visited, a.firstTalk, .ctaBand .glass, .heroActions .glass { color:#090d14 !important; }
.firstTalk, .ctaBand .glass, .heroActions .glass { background:rgba(255,255,255,.72)!important; border:1px solid rgba(9,13,20,.16)!important; box-shadow:0 12px 34px rgba(25,50,70,.09)!important; backdrop-filter:blur(18px) saturate(125%); -webkit-backdrop-filter:blur(18px) saturate(125%); }
.firstTalk:hover, .ctaBand .glass:hover, .heroActions .glass:hover { background:rgba(255,255,255,.92)!important; color:#000!important; transform:translateY(-1px); }
.heroMedia video{opacity:.94!important;filter:saturate(.86) contrast(.95) brightness(1.02);object-fit:cover;width:100%;height:100%;}
.heroWash{background:linear-gradient(90deg,rgba(244,251,255,.6) 0%,rgba(244,251,255,.32) 42%,rgba(210,240,255,.1) 100%),radial-gradient(circle at 84% 20%,rgba(134,223,255,.22),transparent 40%)!important;}
.worldGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
.worldGrid .worldCard:last-child{grid-column:1/-1;max-width:none;}
@media(max-width:900px){.worldGrid{grid-template-columns:1fr}.worldGrid .worldCard:last-child{grid-column:auto}.nav.primary{gap:2px}.navlink{padding-inline:7px;font-size:13px}}
/* V15 Business Platform / Shop */
.shopHero{padding:74px 0 58px;background:radial-gradient(circle at 82% 10%,rgba(134,223,255,.34),transparent 30%),linear-gradient(180deg,#fff,#eefaff)}
.shopHeroGrid{display:grid;grid-template-columns:1fr .72fr;gap:42px;align-items:center}.shopHero h1{font-size:64px;line-height:.98;letter-spacing:-.055em;margin:8px 0 20px;color:#153c55}.shopHero p.lead{font-size:19px;line-height:1.65;color:#688698;max-width:720px}.shopHeroCard{padding:28px;border-radius:28px;background:rgba(255,255,255,.72);border:1px solid rgba(72,157,199,.15);box-shadow:0 28px 80px rgba(68,132,163,.12);backdrop-filter:blur(18px)}.shopHeroStats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.shopHeroStats div{padding:18px;border-radius:18px;background:#f7fcff}.shopHeroStats strong{display:block;font-size:24px;color:#214d65}.shopHeroStats span{font-size:12px;color:#7893a2}
.shopActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.shopPrimary,.shopSecondary,.shopAdd{border:0;cursor:pointer;border-radius:15px;min-height:46px;padding:0 18px;font-weight:850}.shopPrimary,.shopAdd{background:#173c53;color:#fff;box-shadow:0 10px 26px rgba(23,60,83,.16)}.shopPrimary:hover,.shopAdd:hover{background:#0f3147;transform:translateY(-1px)}.shopSecondary{display:inline-flex;align-items:center;background:rgba(255,255,255,.78);color:#234f67;border:1px solid rgba(57,129,166,.16)}
.shopSection{padding:78px 0}.shopSection.soft{background:linear-gradient(180deg,#f8fdff,#edf9fe)}.shopHead{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:30px}.shopHead h2{font-size:43px;letter-spacing:-.04em;margin:5px 0 0;color:#173c55}.shopHead p{color:#6b8798;max-width:620px;line-height:1.6}.packageGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.packageCard{position:relative;padding:30px;border-radius:28px;background:#fff;border:1px solid rgba(72,157,199,.16);box-shadow:0 20px 60px rgba(68,132,163,.09)}.packageCard.recommended{border-color:rgba(66,167,212,.45);box-shadow:0 28px 80px rgba(53,151,195,.16);transform:translateY(-6px)}.packageBadge,.productBadge{display:inline-flex;padding:7px 10px;border-radius:999px;background:#e2f6ff;color:#197ca9;font-size:10px;font-weight:900;letter-spacing:.09em}.packageCard h3{font-size:28px;margin:16px 0 7px;color:#214d65}.packageCard .price{font-size:34px;font-weight:900;color:#173c55}.packageCard .price small{font-size:13px;font-weight:650;color:#7893a2}.packageCard ul,.shopProduct ul{padding:0;list-style:none;margin:22px 0}.packageCard li,.shopProduct li{position:relative;padding:7px 0 7px 22px;color:#5d7b8d;font-size:14px}.packageCard li:before,.shopProduct li:before{content:'✓';position:absolute;left:0;color:#2fa5d5;font-weight:900}.packageCard button{width:100%}
.filterBar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.filterBar button{cursor:pointer;border:1px solid rgba(57,129,166,.14);background:#fff;color:#52758a;border-radius:999px;padding:10px 14px;font-weight:760;font-size:12px}.filterBar button.active,.filterBar button:hover{background:#173c53;color:#fff}.productGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.shopProduct{position:relative;display:flex;flex-direction:column;min-height:450px;padding:24px;border-radius:24px;background:#fff;border:1px solid rgba(72,157,199,.14);box-shadow:0 18px 54px rgba(68,132,163,.08);transition:.2s}.shopProduct:hover{transform:translateY(-3px);box-shadow:0 24px 68px rgba(68,132,163,.13)}.shopProduct.featured{border-color:rgba(54,161,209,.35)}.shopProduct .productTop p{font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:#42a7d4}.shopProduct h3{font-size:24px;margin:8px 0;color:#214d65}.shopProduct .productTop span{display:block;color:#6f8999;line-height:1.55;font-size:14px}.productPrice{margin:20px 0 4px}.productPrice strong{display:block;font-size:30px;color:#173c55}.productPrice small{display:block;color:#7893a2;margin-top:3px}.shopProduct ul{margin:16px 0 18px}.contractMini{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto;margin-bottom:14px}.contractMini span{font-size:10px;font-weight:780;background:#f1f9fd;color:#638195;padding:6px 8px;border-radius:999px}.shopProduct .shopAdd{width:100%}
.platformStrip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.platformMini{padding:22px;border-radius:22px;background:rgba(255,255,255,.74);border:1px solid rgba(72,157,199,.15)}.platformMini span{font-size:11px;color:#42a7d4;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.platformMini strong{display:block;font-size:24px;color:#214d65;margin:8px 0}.platformMini p{font-size:13px;color:#6d8798;line-height:1.55;margin:0}
.portalPreview{display:grid;grid-template-columns:260px 1fr;gap:16px;padding:14px;background:#eaf7fd;border:1px solid rgba(72,157,199,.15);border-radius:30px;box-shadow:0 26px 80px rgba(68,132,163,.1)}.portalSide{padding:24px;border-radius:21px;background:#173c53;color:#fff}.portalSide img{width:130px;filter:brightness(0) invert(1);margin-bottom:24px}.portalSide a{display:block;padding:9px 0;color:rgba(255,255,255,.76);font-size:13px}.portalSide a:first-of-type{color:#fff;font-weight:850}.portalMain{padding:25px}.portalMain h3{font-size:30px;margin:0 0 18px;color:#214d65}.portalStats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.portalStats div{padding:20px;border-radius:18px;background:#fff}.portalStats span{display:block;color:#7893a2;font-size:11px}.portalStats strong{display:block;font-size:24px;color:#173c55;margin-top:5px}.portalTable{margin-top:15px;background:#fff;border-radius:18px;overflow:hidden}.portalRow{display:grid;grid-template-columns:1.4fr .8fr .7fr;padding:14px 17px;border-bottom:1px solid #edf4f7;font-size:13px;color:#58778a}.portalRow:last-child{border-bottom:0}.portalRow.head{font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;color:#8aa0ad}
.securityPreview{display:grid;grid-template-columns:1fr 1fr;gap:22px}.securityCard{padding:28px;border-radius:26px;background:#fff;border:1px solid rgba(72,157,199,.15)}.securityCard h3{font-size:25px;color:#214d65;margin-top:0}.securityCard ol,.securityCard ul{color:#648194;line-height:1.8;padding-left:20px}
.cartFloating{position:fixed;right:24px;bottom:24px;z-index:85;border:0;background:#173c53;color:#fff;border-radius:18px;padding:14px 17px;font-weight:850;box-shadow:0 18px 46px rgba(20,54,75,.24);cursor:pointer}.cartFloating b{display:inline-grid;place-items:center;min-width:23px;height:23px;margin-left:8px;border-radius:999px;background:#86dfff;color:#173c53}.cartBackdrop{display:none;position:fixed;inset:0;background:rgba(14,37,52,.28);z-index:89;backdrop-filter:blur(3px)}.cartBackdrop.open{display:block}.cartDrawer{position:fixed;top:0;right:0;z-index:90;width:min(470px,100%);height:100vh;background:#fff;transform:translateX(102%);transition:.25s;box-shadow:-20px 0 70px rgba(20,54,75,.18);display:flex;flex-direction:column}.cartDrawer.open{transform:none}.cartHeader{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid #eaf2f6}.cartHeader h2{margin:0;color:#214d65}.cartHeader button{border:0;background:#eef7fb;border-radius:12px;width:38px;height:38px;cursor:pointer;font-size:21px}.cartItems{padding:10px 24px;overflow:auto;flex:1}.cartEmpty{padding:35px 0;color:#7992a0;text-align:center}.cartLine{display:flex;justify-content:space-between;gap:15px;padding:17px 0;border-bottom:1px solid #edf3f6}.cartLine strong{display:block;color:#214d65;font-size:14px}.cartLine span,.cartLine small{display:block;color:#7893a2;font-size:12px;margin-top:4px}.qty{display:flex;align-items:center;gap:6px}.qty button{width:28px;height:28px;border:1px solid #dcebf2;background:#f8fcfe;border-radius:9px;cursor:pointer}.qty .trash{margin-left:4px;color:#9b4d4d}.cartTotals{padding:20px 24px;background:#f5fbfe;border-top:1px solid #e4f0f5}.totalRow{display:flex;justify-content:space-between;gap:10px;padding:7px 0;color:#58778a}.totalRow.big{font-size:18px;font-weight:900;color:#173c55}.cartTotals small{display:block;color:#7a94a3;line-height:1.5;margin:8px 0 16px}.cartTotals button{width:100%}
.cloudCommerce{display:grid;grid-template-columns:1.05fr .95fr;gap:22px}.cloudOffer{padding:28px;border-radius:26px;background:#fff;border:1px solid rgba(72,157,199,.15);box-shadow:0 18px 54px rgba(68,132,163,.08)}.cloudOffer h3{font-size:27px;color:#214d65;margin:8px 0}.cloudOffer p{color:#6c8798;line-height:1.6}.cloudOffer .price{font-size:29px;font-weight:900;color:#173c55;margin:17px 0}.cloudOffer .shopAdd{width:100%}
@media(max-width:1000px){.shopHeroGrid,.cloudCommerce,.securityPreview{grid-template-columns:1fr}.packageGrid,.productGrid{grid-template-columns:repeat(2,1fr)}.platformStrip,.portalStats{grid-template-columns:repeat(2,1fr)}.portalPreview{grid-template-columns:1fr}.portalSide{display:none}}
@media(max-width:680px){.shopHero h1{font-size:48px}.shopHead{align-items:flex-start;flex-direction:column}.packageGrid,.productGrid,.platformStrip,.portalStats{grid-template-columns:1fr}.portalRow{grid-template-columns:1fr;gap:5px}.cartFloating{right:14px;bottom:14px}}
/* V17 adjustments */
.overviewGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.overviewCard{padding:28px;border-radius:24px;background:#fff;border:1px solid rgba(72,157,199,.16);box-shadow:0 18px 54px rgba(68,132,163,.08)}
body.overviewPage .pageHero h1,body.overviewPage .center h2,body.overviewPage .detailHero h1{
background-image:linear-gradient(90deg,#173b55 0%,#173b55 18%,var(--themeA) 62%,var(--themeB) 100%)!important;
-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
.overviewCard{position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.overviewCard:hover{transform:translateY(-6px);box-shadow:0 26px 56px rgba(42,96,126,.14)}
.overviewCard:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--themeA),var(--themeB))}
.overviewIcon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;color:#fff;margin-bottom:14px;background:linear-gradient(135deg,var(--themeA),var(--themeB));box-shadow:0 8px 18px rgba(42,96,126,.18);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.overviewCard:hover .overviewIcon{transform:scale(1.1) rotate(-6deg)}
.overviewIcon svg{width:23px;height:23px}
.overviewCard ul{list-style:none;padding:0;margin:14px 0 18px;display:grid;gap:8px}
.overviewCard ul li{padding-left:24px;position:relative;color:#41647a;font-size:13.5px}
.overviewCard ul li:before{content:"✓";position:absolute;left:0;color:var(--themeA);font-weight:900}
.overviewCard h3{margin:0 0 10px;font-size:28px;color:#214d65}
.overviewCard p{margin:0 0 14px;color:#6c8798;line-height:1.65}
.overviewCard ul{margin:0 0 16px;padding-left:18px;color:#58788d;line-height:1.7}
.overviewCard .ghost,.overviewCard .glass{margin-top:6px}
.pricingGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pricingCard{padding:30px;border-radius:26px;background:#fff;border:1px solid rgba(72,157,199,.16);box-shadow:0 18px 54px rgba(68,132,163,.08);display:flex;flex-direction:column}
.pricingCard.featuredOffer{border-color:rgba(63,171,217,.35);box-shadow:0 22px 62px rgba(68,132,163,.12)}
.productBadge{display:inline-flex;align-self:flex-start;padding:7px 10px;border-radius:999px;background:#eefaff;color:#2f98c7;font-size:11px;font-weight:850;letter-spacing:.08em}
.pricingCard h3{margin:12px 0 10px;font-size:28px;color:#214d65}
.pricingCard p{margin:0 0 12px;color:#6c8798;line-height:1.65}
.pricingCard .price{font-size:30px;font-weight:900;color:#173c55;margin:14px 0 10px}
.pricingCard ul{margin:0 0 16px;padding-left:18px;color:#58788d;line-height:1.7}
.pricingCard .shopPrimary{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 17px;border-radius:15px;background:#173c55;color:#fff;font-weight:800}
.pricingCard .shopPrimary:hover{background:#1d4f6d}
@media(max-width:1000px){.overviewGrid,.pricingGrid{grid-template-columns:1fr}}
/* =========================
V18 – Header & Hero polish
========================= */
.nav.utility .navlink{
color:#111!important;
font-weight:760;
}
.nav.utility .navlink:hover{
color:#111!important;
background:rgba(0,0,0,.035)!important;
}
.nav.utility .glass{
position:relative;
min-height:44px;
padding:0 17px 0 42px;
background:rgba(255,255,255,.92)!important;
color:#111!important;
border:1.5px solid #4bbbe9!important;
box-shadow:0 10px 28px rgba(45,164,214,.12),inset 0 1px 0 rgba(255,255,255,.95)!important;
backdrop-filter:blur(16px);
}
.nav.utility .glass:before{
content:"";
position:absolute;
left:15px;
width:15px;
height:15px;
border:2px solid #4bbbe9;
border-radius:50%;
box-shadow:inset 0 0 0 3px rgba(134,223,255,.16);
}
.nav.utility .glass:after{
content:"";
position:absolute;
left:25px;
top:24px;
width:6px;
height:6px;
border-left:2px solid #4bbbe9;
border-bottom:2px solid #4bbbe9;
transform:rotate(-18deg);
border-radius:1px;
}
.nav.utility .glass:hover{
background:#fff!important;
transform:translateY(-1px);
box-shadow:0 14px 34px rgba(45,164,214,.18),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.hero.videoReady{
background:#e9f8ff!important;
}
.heroMedia video{
opacity:1!important;
filter:saturate(1.15) contrast(1.03) brightness(.94)!important;
transform:scale(1.025);
}
.heroWash{
background:
linear-gradient(90deg,rgba(248,253,255,.86) 0%,rgba(238,249,255,.70) 43%,rgba(134,223,255,.24) 72%,rgba(54,163,214,.12) 100%),
radial-gradient(circle at 78% 24%,rgba(49,165,218,.24),transparent 30%),
radial-gradient(circle at 62% 78%,rgba(134,223,255,.22),transparent 34%)!important;
}
.hero.videoReady:before,
.hero.videoReady:after{
content:"";
position:absolute;
pointer-events:none;
border-radius:50%;
filter:blur(2px);
z-index:-1;
}
.hero.videoReady:before{
width:340px;height:340px;
right:8%;top:10%;
background:radial-gradient(circle,rgba(74,184,229,.18),rgba(134,223,255,.04) 58%,transparent 72%);
animation:heroFloat 8s ease-in-out infinite alternate;
}
.hero.videoReady:after{
width:260px;height:260px;
right:28%;bottom:-4%;
background:radial-gradient(circle,rgba(17,87,135,.12),rgba(134,223,255,.02) 60%,transparent 72%);
animation:heroFloat2 10s ease-in-out infinite alternate;
}
@keyframes heroFloat{
from{transform:translate3d(0,0,0) scale(1)}
to{transform:translate3d(-28px,18px,0) scale(1.08)}
}
@keyframes heroFloat2{
from{transform:translate3d(0,0,0) scale(.96)}
to{transform:translate3d(30px,-18px,0) scale(1.08)}
}
.hero h1{
color:#123c5a!important;
}
.hero h1 span{
background:linear-gradient(100deg,#153f5d 0%,#286f9e 25%,#45aee0 55%,#86dfff 78%,#4ab9e7 100%)!important;
background-size:180% 100%!important;
-webkit-background-clip:text!important;
background-clip:text!important;
color:transparent!important;
animation:logoGradientShift 7s ease-in-out infinite alternate;
}
@keyframes logoGradientShift{
from{background-position:0% 50%}
to{background-position:100% 50%}
}
.heroGlassNote{
background:rgba(255,255,255,.34)!important;
border-color:rgba(255,255,255,.68)!important;
box-shadow:0 20px 55px rgba(33,118,160,.12)!important;
}
.heroActions .glass{
background:rgba(255,255,255,.88)!important;
color:#122f42!important;
border:1.5px solid rgba(65,176,225,.72)!important;
box-shadow:0 12px 30px rgba(47,158,207,.12),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.heroActions .glass:hover{
background:#fff!important;
}
.heroActionStrip{
display:flex;
flex-wrap:wrap;
gap:9px;
margin-top:20px;
}
.heroActionStrip span{
display:inline-flex;
align-items:center;
gap:7px;
padding:8px 11px;
border-radius:999px;
border:1px solid rgba(78,171,215,.16);
background:rgba(255,255,255,.46);
backdrop-filter:blur(12px);
color:#41677c;
font-size:11px;
font-weight:800;
letter-spacing:.02em;
box-shadow:0 8px 22px rgba(43,125,164,.07);
animation:chipLift 5.5s ease-in-out infinite alternate;
}
.heroActionStrip span:nth-child(2){animation-delay:.8s}
.heroActionStrip span:nth-child(3){animation-delay:1.6s}
.heroActionStrip span:nth-child(4){animation-delay:2.4s}
.heroActionStrip i{
width:7px;height:7px;border-radius:50%;
background:linear-gradient(135deg,#2f8dc0,#86dfff);
box-shadow:0 0 0 4px rgba(134,223,255,.14);
}
@keyframes chipLift{
from{transform:translateY(0)}
to{transform:translateY(-4px)}
}
@media(max-width:760px){
.heroActionStrip{gap:7px}
.heroActionStrip span{font-size:10px;padding:7px 9px}
}
@media(prefers-reduced-motion:reduce){
.hero.videoReady:before,.hero.videoReady:after,.hero h1 span,.heroActionStrip span{animation:none!important}
}
/* =========================
V19 – Headline & First-talk CTA refinement
========================= */
/* Die komplette Hero-Headline läuft jetzt von einem weicheren Dunkelblau
in die helle Wolkenfarbe des SU-IT Logos. */
.hero h1{
background:linear-gradient(96deg,
#315f79 0%,
#3f7899 26%,
#529cc4 50%,
#69b9e5 72%,
#87d7fa 100%)!important;
background-size:100% 100%!important;
-webkit-background-clip:text!important;
background-clip:text!important;
color:transparent!important;
-webkit-text-fill-color:transparent!important;
animation:none!important;
}
.hero h1 span{
background:none!important;
color:inherit!important;
-webkit-text-fill-color:transparent!important;
animation:none!important;
}
/* Erstgespräch bewusst ruhig: kein Icon, kein kräftiges Blau. */
a.glass[href*="erstgespraech"]{
min-height:44px;
padding:0 18px!important;
background:rgba(255,255,255,.93)!important;
color:#26343d!important;
border:1px solid rgba(79,135,164,.25)!important;
box-shadow:0 10px 26px rgba(33,78,104,.08),inset 0 1px 0 rgba(255,255,255,.98)!important;
backdrop-filter:blur(16px) saturate(112%);
-webkit-backdrop-filter:blur(16px) saturate(112%);
}
a.glass[href*="erstgespraech"]:before,
a.glass[href*="erstgespraech"]:after{
display:none!important;
content:none!important;
}
a.glass[href*="erstgespraech"]:hover{
background:#f7fbfd!important;
color:#111820!important;
border-color:rgba(79,135,164,.36)!important;
transform:translateY(-1px);
box-shadow:0 14px 32px rgba(33,78,104,.11)!important;
}
/* V20 hero word tones + Cisco/ocean-blue CTAs */
.heroTitle{display:block;color:inherit}
.heroTitle .heroLine{background-image:linear-gradient(90deg,#1c4a68,#2e86b8,#55b8e4,#86dfff);-webkit-background-clip:text;background-clip:text;color:transparent}
.heroTitle .tone1,.heroTitle .tone2,.heroTitle .tone3,.heroTitle .tone4{background:none!important;-webkit-background-clip:initial!important;color:inherit;display:inline}
.heroChips,.heroTags,.heroPills{display:none!important}
.topbar .utility .glass,
.heroActions .glass,
.ctaBand .glass,
.formActions .glass,
.contactAside .miniGlass,
a.glass[href*="erstgespraech"],
button.glass{
color:#fff!important;
background:linear-gradient(135deg,#126f9f 0%,#168bbd 45%,#2da9cf 100%)!important;
border:1px solid rgba(8,88,129,.28)!important;
box-shadow:0 12px 28px rgba(18,111,159,.22),inset 0 1px 0 rgba(255,255,255,.22)!important;
}
.topbar .utility .glass:hover,
.heroActions .glass:hover,
.ctaBand .glass:hover,
.formActions .glass:hover,
.contactAside .miniGlass:hover,
a.glass[href*="erstgespraech"]:hover,
button.glass:hover{
background:linear-gradient(135deg,#0d648f 0%,#117eae 48%,#249bc2 100%)!important;
color:#fff!important;
transform:translateY(-1px);
box-shadow:0 16px 34px rgba(18,111,159,.28),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.heroActionStrip{display:none!important}
/* =========================
V21 – Logo-matched CTAs + richer detail pages
========================= */
.topbar .utility .glass,
.heroActions .glass,
.ctaBand .glass,
.formActions .glass,
.contactAside .miniGlass,
a.glass[href*="erstgespraech"],
button.glass{
color:#fff!important;
background:linear-gradient(135deg,#a4dff6 0%,#7ecdef 48%,#5fb8e0 100%)!important;
border:1px solid rgba(255,255,255,.75)!important;
box-shadow:0 12px 30px rgba(95,184,224,.24),inset 0 1px 0 rgba(255,255,255,.4)!important;
font-family:Aptos,"Aptos Body",Calibri,"Segoe UI",Inter,sans-serif!important;
font-size:16px!important;
}
.topbar .utility .glass:hover,
.heroActions .glass:hover,
.ctaBand .glass:hover,
.formActions .glass:hover,
.contactAside .miniGlass:hover,
a.glass[href*="erstgespraech"]:hover,
button.glass:hover{
background:linear-gradient(135deg,#8fd3f4 0%,#6ec3ec 48%,#4fabd8 100%)!important;
color:#fff!important;
transform:translateY(-1px);
box-shadow:0 16px 36px rgba(95,184,224,.3),inset 0 1px 0 rgba(255,255,255,.35)!important;
}
.detailLead{max-width:860px;margin:0 auto 38px;text-align:center;color:#688497;font-size:18px;line-height:1.7}
.infoGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.infoCard{padding:26px;border-radius:22px;border:1px solid rgba(70,148,187,.16);background:#fff;box-shadow:0 12px 36px rgba(62,125,155,.08)}
.audienceToggle{display:inline-flex;gap:4px;padding:5px;background:#eefaff;border-radius:16px;margin:0 auto 34px;position:relative;left:50%;transform:translateX(-50%)}
.audienceToggle{isolation:isolate}
.audienceToggle:before{content:"";position:absolute;top:5px;left:0;width:var(--pill-w,80px);height:calc(100% - 10px);background:linear-gradient(135deg,#45bdeb,#86dfff);border-radius:12px;box-shadow:0 10px 24px rgba(69,189,235,.4);transition:transform .35s cubic-bezier(.3,.9,.3,1),width .35s cubic-bezier(.3,.9,.3,1);transform:translateX(var(--pill-x,0px));z-index:0}
.audienceToggle.pillGlow:before{animation:pillGlowPulse .6s ease-out}
@keyframes pillGlowPulse{0%{box-shadow:0 10px 24px rgba(69,189,235,.4),0 0 0 0 rgba(134,223,255,.7)}70%{box-shadow:0 10px 24px rgba(69,189,235,.4),0 0 0 14px rgba(134,223,255,0)}100%{box-shadow:0 10px 24px rgba(69,189,235,.4),0 0 0 0 rgba(134,223,255,0)}}
.audienceBtn{position:relative;z-index:1;border:0;background:transparent;padding:11px 26px;border-radius:12px;font-weight:800;color:#4a7690;cursor:pointer;font-size:14px;transition:color .3s}
.audienceBtn.active{background:transparent;color:#fff}
.tariffGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tariffCard{position:relative;padding:23px 20px;border-radius:22px;border:1px solid rgba(70,148,187,.16);background:#fff;box-shadow:0 14px 38px rgba(62,125,155,.09);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.tariffCard:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(62,125,155,.16)}
.tariffCard.featured{border-color:rgba(69,189,235,.5);box-shadow:0 20px 50px rgba(62,150,195,.18);background:linear-gradient(180deg,#fff,#f3fcff)}
.tariffBadge{position:absolute;top:-12px;left:20px;background:linear-gradient(135deg,#45bdeb,#86dfff);color:#fff;font-size:10px;font-weight:900;letter-spacing:.05em;padding:5px 12px;border-radius:999px;box-shadow:0 8px 16px rgba(69,189,235,.35)}
.tariffCard h3{margin:9px 0 4px;font-size:20px;color:#173b55}
.tariffDesc{margin:0 0 12px;color:#6d8798;font-size:12.5px}
.tariffPrice{display:flex;align-items:baseline;gap:7px;margin-bottom:2px}
.tariffPrice strong{font-size:29px;color:#173b55;letter-spacing:-.02em}
.tariffPrice small{color:#6d8798;font-size:11px}
.tariffVatNote{color:#93a9b6;font-size:11px;margin-bottom:14px}
.tariffFeatures{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:7px;flex:1}
.tariffFeatures li{padding-left:20px;position:relative;color:#41647a;font-size:12.5px}
.tariffFeatures li:before{content:"✓";position:absolute;left:0;color:#2fb3a3;font-weight:900}
.tariffSetup{font-size:11px;color:#8098a8;margin-bottom:9px}
.tariffAdd{width:100%;border:0;border-radius:13px;padding:12px;background:linear-gradient(135deg,#a4dff6,#7ecdef,#5fb8e0);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 10px 22px rgba(95,184,224,.3);font-size:14px;font-family:'Josefin Sans','Century Gothic',Futura,sans-serif;letter-spacing:.02em}
.tariffAdd:hover{filter:brightness(1.03)}
.tariffCard h3,.tariffCard .tariffDesc,.tariffCard .tariffFeatures,.quoteCard h3,.quoteCard p{font-family:'Josefin Sans','Century Gothic',Futura,sans-serif}
.edgeScrollGrid{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 4px 20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.edgeScrollGrid::-webkit-scrollbar{display:none}
.edgeScrollGrid .tariffCard{scroll-snap-align:start;flex:0 0 250px}
.tariffCard .tariffAdd{margin-top:auto}
.tariffCard .tariffFeatures{flex:0 0 auto}
.quoteCard{background:linear-gradient(180deg,#fff,#f6fdff)}
.quoteCard .tariffFeatures{margin-bottom:20px}
.tariffFootnote{max-width:900px;margin:22px auto 0;color:#8098a8;font-size:12.5px;line-height:1.6;text-align:center}
.activationNote{max-width:620px;margin:20px auto 0;display:flex;gap:14px;align-items:baseline;justify-content:center;flex-wrap:wrap;padding:16px 22px;border-radius:16px;background:#fff;border:1px solid rgba(70,148,187,.16);text-align:center}
.activationNote strong{color:#173b55}
.activationNote span{color:#6d8798;font-size:13.5px}
.comboTeaser{max-width:900px;margin:26px auto 0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;border-radius:20px;background:linear-gradient(135deg,rgba(206,242,255,.7),rgba(241,251,255,.85));border:1px solid rgba(77,162,203,.18);flex-wrap:wrap}
.comboTeaser strong{display:block;font-size:18px;color:#173b55;margin:4px 0}
.comboTeaser p{margin:0;color:#6d8798;font-size:14px}
.deviceGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.voiceForWhoPanel{max-width:640px;margin:0 auto}
.wireScene{position:relative;width:100%;min-width:0;aspect-ratio:1400/460;margin-top:20px}
.wireArt{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:26px;box-shadow:0 20px 50px rgba(90,110,170,.14)}
.fiberLine{animation:fiberPulse 2.6s ease-in-out infinite}
@keyframes fiberPulse{0%,100%{opacity:.65}50%{opacity:1}}
.wirePoint{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;width:210px}
.wirePoint1{left:8%;top:12%}
.wirePoint2{left:50%;top:9%}
.wirePoint3{left:93%;top:12%}
.wireNum{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#6c8cf5,#a06ef0);color:#fff;font-weight:900;font-size:14px;box-shadow:0 8px 16px rgba(108,140,245,.4);margin-bottom:8px}
.wireLabel{background:radial-gradient(ellipse at center,rgba(255,255,255,.94) 55%,rgba(255,255,255,0) 100%);border-radius:14px;padding:6px 10px 10px;text-align:center}
.wireLabel strong{display:block;color:#2c3a63;font-size:14.5px;margin-bottom:3px}
.wireLabel p{margin:0;color:#5c6b8a;font-size:11.5px;line-height:1.4}
@media(max-width:900px){
.wireScene{
width:100%;
min-width:0;
overflow:hidden;
aspect-ratio:1400/600;
}
.wireArt{
width:100%;
min-width:0;
max-width:100%;
}
.wirePoint{
top:10% !important;
width:30% !important;
min-width:0 !important;
max-width:30% !important;
transform:translate(-50%,0) !important;
}
.wirePoint1{
left:17% !important;
}
.wirePoint2{
left:50% !important;
}
.wirePoint3{
left:83% !important;
}
.wireNum{
width:32px !important;
height:32px !important;
margin-bottom:5px !important;
}
.wireLabel{
width:100% !important;
padding:5px 4px 7px !important;
}
.wireLabel strong{
font-size:12px !important;
line-height:1.2 !important;
margin-bottom:0 !important;
}
.wireLabel p{
display:none !important;
}
}
.deviceTile{position:relative;aspect-ratio:1/1;border-radius:20px;overflow:hidden;box-shadow:0 14px 34px rgba(62,125,155,.14);transition:transform .35s,box-shadow .35s}
.deviceTile:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 20px 44px rgba(62,125,155,.22)}
.deviceArt{position:absolute;inset:0;width:100%;height:100%;display:block;transition:transform .6s}
.deviceTile:hover .deviceArt{transform:scale(1.06)}
.deviceTile .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,53,74,0) 55%,rgba(10,30,45,.72))}
.deviceLabel{position:absolute;left:0;right:0;bottom:0;padding:16px 14px;color:#fff;font-weight:800;font-size:14.5px;line-height:1.25;text-shadow:0 2px 8px rgba(0,0,0,.25)}
@media(max-width:900px){.deviceGrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.deviceGrid{grid-template-columns:1fr 1fr}.deviceLabel{font-size:13px}}
.checkoutEmpty{max-width:480px;margin:0 auto;text-align:center;padding:50px 30px;background:#fff;border-radius:24px;border:1px solid rgba(70,148,187,.16)}
.checkoutEmpty strong{display:block;font-size:20px;color:#173b55;margin-bottom:8px}
.checkoutEmpty p{color:#6d8798;margin-bottom:20px}
.checkoutEmpty a{margin:0 6px}
.checkoutSteps{display:flex;justify-content:center;gap:6px;list-style:none;padding:0;margin:0 0 36px;flex-wrap:wrap}
.checkoutSteps li{display:flex;align-items:center;gap:8px;padding:9px 16px 9px 9px;border-radius:999px;background:#fff;border:1px solid rgba(70,148,187,.16);color:#8098a8;font-weight:700;font-size:13px}
.checkoutSteps li span{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#eefaff;color:#6d8798;font-size:12px;font-weight:900}
.checkoutSteps li.active{background:linear-gradient(135deg,#a4dff6,#5fb8e0);color:#fff;border-color:transparent}
.checkoutSteps li.active span{background:rgba(255,255,255,.3);color:#fff}
.checkoutSteps li.done{color:#2fb3a3}
.checkoutSteps li.done span{background:#2fb3a3;color:#fff}
.checkoutBody{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}
.checkoutPanel{background:#fff;border-radius:26px;border:1px solid rgba(70,148,187,.16);box-shadow:0 20px 50px rgba(62,125,155,.09);padding:36px}
.checkoutPanel h2{margin:0 0 20px;color:#173b55;font-size:24px}
.ckHint{color:#6d8798;font-size:14px;margin:-10px 0 20px}
.checkoutFields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.checkoutFields[hidden]{display:none}
.ckField{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:#41647a}
.ckField[hidden]{display:none}
.ckField.wide{grid-column:1/-1}
.ckField input,.ckField select{padding:12px 14px;border-radius:12px;border:1px solid rgba(70,148,187,.24);font-size:14px;font-family:inherit;color:#173b55}
.ckField input:focus{outline:2px solid #5fb8e0;outline-offset:1px}
.ckError{color:#e0554f;font-size:13px;font-weight:700;margin-top:14px}
.ckChoice{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.ckChoiceCard{position:relative;display:block;padding:18px 18px 18px 44px;border-radius:16px;border:1.5px solid rgba(70,148,187,.2);cursor:pointer;transition:border-color .2s,background .2s}
.ckChoiceCard input{position:absolute;left:16px;top:20px;width:16px!important;height:16px}
.ckChoiceCard strong{display:block;color:#173b55;font-size:14.5px;margin-bottom:4px}
.ckChoiceCard span{color:#6d8798;font-size:12.5px;line-height:1.4}
.ckChoiceCard:has(input:checked){border-color:#5fb8e0;background:linear-gradient(135deg,rgba(206,242,255,.35),rgba(241,251,255,.6))}
.ckCheckbox{display:flex!important;align-items:flex-start;gap:10px;font-size:14px;color:#41647a;margin-bottom:14px;cursor:pointer}
.ckCheckbox input{margin-top:3px;flex:0 0 auto;width:16px!important;height:16px;min-width:16px}
.ckCheckbox span{flex:1;min-width:0;display:inline}
.ckCheckbox a{color:#3aa9d0;font-weight:700}
.ckHonestNote{margin-top:20px;padding:14px 16px;border-radius:14px;background:#f6fbff;border:1px solid rgba(70,148,187,.16);font-size:12.5px;color:#5c7185;line-height:1.5}
.checkoutSummaryItems .cartLine{border:1px solid rgba(70,148,187,.16);border-radius:14px;padding:14px 16px;margin-bottom:10px}
.checkoutAside{position:sticky;top:100px}
.checkoutMiniSummary{background:#f6fbff;border-radius:22px;border:1px solid rgba(70,148,187,.16);padding:22px}
.checkoutMiniSummary .k{color:#3aa9d0;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.ckMiniList{margin:14px 0;display:grid;gap:10px}
.ckMiniLine{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:#41647a}
.ckMiniLine b{color:#173b55}
.ckMiniTotals{border-top:1px solid rgba(70,148,187,.2);padding-top:12px;display:grid;gap:6px}
.ckMiniTotals div{display:flex;justify-content:space-between;font-size:13px;font-weight:800;color:#173b55}
.checkoutNav{display:flex;justify-content:space-between;margin-top:24px}
.checkoutDone{text-align:center;padding:50px 20px}
.ckDoneIcon{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#2fb3a3,#3fd6b4);color:#fff;font-size:28px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
@media(max-width:900px){.checkoutBody{grid-template-columns:1fr}.checkoutAside{position:static}.checkoutFields,.ckChoice{grid-template-columns:1fr}.checkoutPanel{padding:24px}}
.comboSuggestIcon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#2fb3a3,#3fd6b4);color:#fff;font-weight:900;font-size:13px}
.comboSuggestBox strong{display:block;color:#173b55;font-size:13.5px;margin-bottom:2px}
.comboSuggestBox p{margin:0;color:#5c7185;font-size:12px;line-height:1.4}
.comboSuggestBox button{flex:0 0 auto;border:0;border-radius:10px;padding:9px 14px;background:linear-gradient(135deg,#a4dff6,#5fb8e0);color:#fff;font-weight:800;font-size:12.5px;cursor:pointer;white-space:nowrap}
.connectPhotoGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.connectPhotoGrid .worldCard{min-height:340px}
.connectGlowSection{position:relative;overflow:hidden;isolation:isolate}
.connectGlowSection:before,.connectGlowSection:after{content:"";position:absolute;border-radius:50%;filter:blur(60px);z-index:-1;pointer-events:none}
.connectGlowSection:before{width:480px;height:480px;left:-140px;top:-100px;background:radial-gradient(circle,rgba(104,211,187,.4),transparent 70%);animation:connectGlowDriftA 12s ease-in-out infinite alternate}
.connectGlowSection:after{width:440px;height:440px;right:-120px;bottom:-120px;background:radial-gradient(circle,rgba(94,165,255,.38),transparent 70%);animation:connectGlowDriftB 15s ease-in-out infinite alternate}
@keyframes connectGlowDriftA{0%{transform:translate(0,0) scale(1)}100%{transform:translate(60px,40px) scale(1.15)}}
@keyframes connectGlowDriftB{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-50px,-30px) scale(1.1)}}
@media(max-width:900px){.connectPhotoGrid{grid-template-columns:1fr}}
.internetFeatureRow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.internetFeatureRow span{padding:9px 16px;border-radius:999px;background:#fff;border:1px solid rgba(70,148,187,.16);color:#3a6278;font-size:13px;font-weight:700}
.uspBand{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;padding:44px;border-radius:30px;background:linear-gradient(135deg,rgba(206,242,255,.55),rgba(241,251,255,.85));border:1px solid rgba(77,162,203,.18)}
.uspIntro h2{margin:6px 0 10px}
.uspIntro p{color:#6d8798}
.uspList{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.uspList li{padding-left:26px;position:relative;font-weight:700;color:#1c4a63;font-size:14.5px}
.uspList li:before{content:"✓";position:absolute;left:0;color:#2fb3a3;font-weight:900}
.comboGrid{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 4px 20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.comboGrid .comboCard{scroll-snap-align:start;flex:0 0 270px}
.comboGrid::-webkit-scrollbar{display:none}
.comboCard{position:relative;padding:24px 22px;border-radius:22px;border:1px solid rgba(70,148,187,.16);background:#fff;box-shadow:0 12px 34px rgba(62,125,155,.08);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.comboCard .comboParts{flex:0 0 auto;min-height:78px}
.comboCard .tariffAdd{margin-top:auto}
.comboCard:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(62,125,155,.14)}
.comboCard.featured{border-color:rgba(69,189,235,.5);background:linear-gradient(180deg,#fff,#f3fcff)}
.comboAudience{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.08em;color:#3aa9d0;text-transform:uppercase;margin-bottom:6px}
.comboCard h3{margin:0 0 10px;font-size:19px;color:#173b55;min-height:48px}
.comboParts{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:6px}
.comboParts li{padding-left:20px;position:relative;color:#41647a;font-size:13px}
.comboParts li:before{content:"+";position:absolute;left:0;color:#3aa9d0;font-weight:900}
@media(max-width:900px){.uspBand{grid-template-columns:1fr}.uspList{grid-template-columns:1fr}.tariffGrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.tariffGrid{grid-template-columns:1fr}}
.internetTariffGrid{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.internetTariffGrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.internetTariffGrid{grid-template-columns:1fr}}
.infoCard .eyebrow{display:block;color:#3aa9d0;font-weight:850;font-size:11px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:8px}
.infoCard h3{margin:0 0 9px;font-size:23px;color:#214d65}
.infoCard p{margin:0;color:#6d8798;line-height:1.65}
.processGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.processStep{padding:26px;border-radius:22px;background:linear-gradient(180deg,#f7fcff,#eef9fd);border:1px solid rgba(72,157,199,.14)}
.processStep span{display:inline-flex;width:34px;height:34px;border-radius:50%;align-items:center;justify-content:center;background:linear-gradient(135deg,#69bdf6,#8ce4f9);color:#163d55;font-weight:900;font-size:12px;margin-bottom:14px}
.processStep h3{margin:0 0 8px;color:#214d65;font-size:22px}.processStep p{margin:0;color:#6d8798;line-height:1.65}
.detailSplit{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.detailPanel{padding:30px;border-radius:26px;background:#fff;border:1px solid rgba(72,157,199,.16);box-shadow:0 18px 52px rgba(68,132,163,.08)}
.detailPanel h2,.detailPanel h3{color:#214d65;margin-top:0}.detailPanel p,.detailPanel li{color:#667f90;line-height:1.7}.detailPanel ul{padding-left:20px}
.priceNote{display:inline-flex;margin-top:8px;padding:7px 10px;border-radius:999px;background:#eefaff;color:#2e91bb;font-size:11px;font-weight:850;letter-spacing:.04em}
@media(max-width:1000px){.infoGrid,.processGrid,.detailSplit{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.infoGrid,.processGrid,.detailSplit{grid-template-columns:1fr}}
/* V22 Desktop compact tuning: 100% browser zoom should feel closer to former 80–90% view */
@media (min-width:1181px){
.shell{width:min(1140px,calc(100% - 56px));}
.navrow{height:76px;gap:14px;}
.brand img{width:150px;height:52px;}
.nav.primary{margin-left:4px;}
.navlink{padding:13px 8px;font-size:12px;}
.glass{min-height:40px;padding:0 15px;border-radius:14px;font-size:13px;}
.hero.videoReady{padding:76px 0 84px;}
.hero.videoReady .heroGrid{min-height:420px;grid-template-columns:1.06fr .58fr;gap:44px;}
.hero h1,.pageHero h1{font-size:clamp(46px,5.7vw,76px);}
.lead,.pageHero p{font-size:17px;line-height:1.62;}
.heroGlassNote{padding:18px;border-radius:20px;}
.heroGlassNote strong{font-size:20px;}
.section{padding:70px 0;}
.center{max-width:780px;margin-bottom:34px;}
.center h2,.sectionTitle{font-size:clamp(34px,4vw,54px);}
.center p{font-size:16px;}
.worldGrid{gap:20px;}
.worldCard{min-height:340px;border-radius:25px;}
.worldText{padding:25px;}
.worldText h3{font-size:30px;}
.worldText p{font-size:14px;line-height:1.5;}
.serviceGrid{gap:18px;}
.serviceCard{border-radius:24px;}
.serviceCard img{height:190px;}
.serviceBody{padding:21px;}
.serviceBody h3{font-size:24px;}
.featureGrid{gap:16px;}
.feature{padding:22px;}
.feature h3{font-size:20px;}
.pageHero{padding:60px 0;}
.ctaBand{padding:32px;border-radius:26px;}
.ctaBand h2{font-size:32px;}
.formCard,.contactCard,.loginCard{padding:26px;border-radius:25px;}
.footer{padding-top:52px;}
.footGrid{gap:28px;}
.footLogo{width:170px;}
}
@media (min-width:1500px){
.shell{width:min(1180px,calc(100% - 72px));}
}
/* V23 — ruhige Navigation mit breiten Mega-Menüs */
.nav.primary{gap:10px}
.nav.primary .navlink{
position:relative;
padding:15px 8px 17px;
border-radius:0;
background:transparent!important;
color:#315a72;
}
.nav.primary .navlink::after{
content:"";
position:absolute;
left:8px;
right:8px;
bottom:8px;
height:2px;
border-radius:99px;
background:linear-gradient(90deg,#49aaf0,#78dff4);
transform:scaleX(0);
transform-origin:left;
transition:transform .2s ease;
}
.nav.primary .navitem:hover>.navlink,
.nav.primary .navitem:focus-within>.navlink,
.nav.primary .navitem.open>.navlink{color:#173b55;background:transparent!important}
.nav.primary .navitem:hover>.navlink::after,
.nav.primary .navitem:focus-within>.navlink::after,
.nav.primary .navitem.open>.navlink::after{transform:scaleX(1)}
.chev{display:none!important}
/* Grössere, ruhigere Mega-Menüs – Apple-inspirierte Ordnung, SU-IT-Stil */
.dropdown.mega{
width:min(940px,calc(100vw - 48px));
min-width:min(940px,calc(100vw - 48px));
left:-145px;
top:calc(100% + 12px);
padding:26px 28px 28px;
grid-template-columns:255px 1fr;
gap:34px;
border-radius:0 0 24px 24px;
border:1px solid rgba(80,160,200,.12);
border-top:0;
background:rgba(255,255,255,.985);
box-shadow:0 26px 70px rgba(27,77,105,.13);
backdrop-filter:blur(24px);
}
.dropdown.mega.megaRight{left:auto;right:-120px}
.megaIntro{
padding:6px 22px 6px 4px;
border-radius:0;
background:transparent;
border:0;
border-right:1px solid rgba(52,116,151,.12);
}
.megaIntro span{font-size:10px;letter-spacing:.13em;color:#58a9cb}
.megaIntro strong{font-size:29px;margin:8px 0 10px;color:#173b55}
.megaIntro p{font-size:13px;line-height:1.65;color:#718a99;max-width:220px;margin:0 0 18px}
.megaOverview{display:inline-block!important;color:#278bb8!important;font-size:12px!important}
.megaLinks{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:34px;
row-gap:2px;
align-content:start;
}
.megaLinks a{
padding:13px 4px!important;
border:0!important;
border-bottom:1px solid rgba(55,116,149,.08)!important;
border-radius:0!important;
background:transparent!important;
transition:transform .18s ease,color .18s ease;
}
.megaLinks a:hover{transform:translateX(3px);color:#1685b9;background:transparent!important}
.megaLinks b{font-size:16px;color:#214d65;line-height:1.25}
.megaLinks small{margin-top:5px!important;font-size:12px!important;color:#8199a7!important;line-height:1.45}
@media(min-width:1181px) and (max-width:1320px){
.dropdown.mega{width:min(860px,calc(100vw - 36px));min-width:min(860px,calc(100vw - 36px));left:-115px}
.dropdown.mega.megaRight{right:-90px}
.megaLinks{column-gap:24px}
}
@media(max-width:1180px){
.nav.primary{gap:2px}
.nav.primary .navlink{padding:13px 10px;border-radius:10px}
.nav.primary .navlink::after{display:none}
.dropdown.mega{border:1px solid rgba(80,160,200,.12);border-radius:18px;padding:16px;grid-template-columns:1fr;gap:12px}
.megaIntro{border-right:0;border-bottom:1px solid rgba(52,116,151,.10);padding:8px 8px 16px}
}
/* V24 — nur Responsive-Fixes für Header, Mega-Menü und Hero-Zeilen */
.heroTitle .heroLine{display:block;white-space:nowrap}
/* Mega-Menüs bleiben sauber mittig unter dem Header statt vom jeweiligen Link aus nach links zu springen. */
@media (min-width:761px){
.dropdown.mega,
.dropdown.mega.megaRight{
position:fixed!important;
left:50%!important;
right:auto!important;
top:84px!important;
width:min(980px,calc(100vw - 36px))!important;
min-width:0!important;
transform:translate(-50%,8px)!important;
}
.megaItem:hover>.dropdown.mega,
.megaItem:focus-within>.dropdown.mega,
.megaItem.open>.dropdown.mega{
transform:translate(-50%,0)!important;
}
}
/* Zwischen Tablet und normalem Desktop bleibt die Hauptnavigation sichtbar.
Sie bekommt bei Bedarf eine zweite Zeile statt vorschnell zum Hamburger zu wechseln. */
@media (min-width:761px) and (max-width:1180px){
.navrow{
height:auto!important;
min-height:104px;
display:grid!important;
grid-template-columns:auto 1fr auto;
grid-template-rows:58px 44px;
column-gap:14px;
row-gap:0;
padding:4px 0 6px;
align-items:center;
}
.brand{grid-column:1;grid-row:1}
.brand img{width:142px!important;height:50px!important}
.nav.primary{
display:flex!important;
grid-column:1 / -1;
grid-row:2;
width:100%;
justify-content:center;
gap:20px!important;
margin:0!important;
overflow:visible;
}
.nav.utility{
display:flex!important;
grid-column:3;
grid-row:1;
margin-left:auto!important;
gap:5px;
}
.nav.primary .navlink{font-size:12px!important;padding:11px 4px 13px!important}
.nav.utility .navlink{font-size:12px!important;padding:10px 7px!important}
.nav.utility .glass{min-height:38px!important;padding:0 13px!important;font-size:12px!important}
.mobileToggle{display:none!important}
.dropdown.mega,
.dropdown.mega.megaRight{top:106px!important}
}
/* Erst auf wirklich kleinen Ansichten Mobile-Menü verwenden. */
@media (max-width:760px){
.nav.primary,.nav.utility{display:none!important}
.mobileToggle{display:block!important;margin-left:auto}
.navrow.mobile-open .nav{display:flex!important}
.dropdown.mega,
.dropdown.mega.megaRight{
position:static!important;
left:auto!important;
right:auto!important;
top:auto!important;
width:100%!important;
transform:none!important;
}
.heroTitle .heroLine{white-space:normal}
}
/* Headline darf nicht mehr je nach Browserbreite in zufällige Wortgruppen umbrechen. */
.hero.videoReady .heroCopy{min-width:0}
.hero.videoReady .heroTitle{max-width:none!important}
@media (min-width:761px) and (max-width:1050px){
.hero.videoReady .heroTitle{font-size:clamp(54px,7.2vw,72px)!important}
}
/* V25 — stabiler Hover-Korridor für Mega-Menüs, sonst keine Designänderung */
@media (min-width:761px){
.megaItem::after{
content:"";
position:absolute;
left:-18px;
right:-18px;
top:100%;
height:34px;
background:transparent;
pointer-events:auto;
}
.megaItem.open>.dropdown.mega{
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
display:grid!important;
transform:translate(-50%,0)!important;
}
}
/* V26 Connect Internet + homepage trust sections */
.suProcess{background:#fff}.processRail{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}.processRail article{padding:24px;border-top:2px solid rgba(90,188,229,.32);background:linear-gradient(180deg,#fbfeff,#f4fbfe);border-radius:18px;transition:transform .35s,box-shadow .35s}.processRail article:hover{transform:translateY(-6px)}.processRail span{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;font-size:13px;font-weight:900;letter-spacing:0;color:#fff;box-shadow:0 10px 20px rgba(42,96,126,.16);transition:transform .35s}.processRail article:hover span{transform:scale(1.12) rotate(-6deg)}.processRail article:nth-child(1) span{background:linear-gradient(135deg,#3fa9f5,#3f7cf5)}.processRail article:nth-child(2) span{background:linear-gradient(135deg,#7c6cff,#a978ff)}.processRail article:nth-child(3) span{background:linear-gradient(135deg,#3fd6b4,#5bc46a)}.processRail article:nth-child(4) span{background:linear-gradient(135deg,#ff9a3d,#ff6f61)}.processRail strong{display:block;font-size:23px;color:#173b55;margin:9px 0}.processRail p{margin:0;color:#6d8798;line-height:1.55}.partnerSection{background:linear-gradient(180deg,#f7fcff,#eaf8fe)}.partnerHead{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:28px}.partnerHead>div{max-width:780px}.partnerHead h2{font-size:clamp(34px,4.2vw,54px);letter-spacing:-.04em;margin:0 0 12px;color:#173b55}.partnerHead p:not(.k){color:#6d8798;line-height:1.65;margin:0}.partnerHint{font-size:12px;color:#6f8999;border:1px solid rgba(75,158,197,.18);background:#fff;padding:10px 13px;border-radius:999px}.partnerLogos{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.partnerSlot{height:92px;border-radius:18px;border:1px solid rgba(74,160,202,.16);background:rgba(255,255,255,.78);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:850;letter-spacing:.08em;color:#8aa3b2}.internetHero{background:radial-gradient(circle at 78% 18%,rgba(140,228,249,.28),transparent 28%),linear-gradient(180deg,#fff,#edfaff)}
.availabilityCard{padding:28px;border-radius:26px;background:rgba(255,255,255,.82);border:1px solid rgba(72,157,199,.16);box-shadow:0 20px 60px rgba(68,132,163,.10);display:grid;gap:14px}.availabilityCard>span{font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:#42a7d4}.availabilityCard>strong{font-size:28px;color:#173b55}.availabilityCard small{color:#829aaa;line-height:1.45}.termControl{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin:0 auto 30px}.termControl>span{font-weight:850;color:#315a72}.termButtons{display:inline-flex;padding:5px;border-radius:16px;background:#eef8fc;border:1px solid rgba(72,157,199,.14)}.termButtons button{border:0;background:transparent;color:#58798e;padding:10px 15px;border-radius:12px;font-weight:800;cursor:pointer}.termButtons button.active{background:#fff;color:#179abf;box-shadow:0 5px 18px rgba(57,137,171,.12)}.termControl small{width:100%;text-align:center;color:#8aa0ad}
.planBadge{position:absolute;right:22px;top:22px;padding:6px 9px;border-radius:999px;background:#e8fbff;color:#1498b8;font-size:10px;font-weight:900;letter-spacing:.08em}.planEyebrow{font-size:10px;font-weight:900;letter-spacing:.1em;color:#55aacb}
.speed{font-size:18px;font-weight:850;color:#42a7d4;margin-bottom:12px}
.prototypeNote{text-align:center;color:#8aa0ad;font-size:12px;margin-top:18px}
@media(max-width:1000px){.processRail{grid-template-columns:repeat(2,1fr)}.partnerLogos{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:680px){.processRail{grid-template-columns:1fr}.partnerHead{align-items:flex-start;flex-direction:column}.partnerLogos{grid-template-columns:repeat(2,1fr)}}
/* V27 – Header search/cart + search overlay */
.nav.utility{gap:10px}
.nav.utility .glass{display:none!important}
.iconAction{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgba(72,157,199,.18);border-radius:14px;background:rgba(255,255,255,.92);cursor:pointer;box-shadow:0 8px 22px rgba(44,121,158,.08);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;position:relative}
.iconAction:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(44,121,158,.12);border-color:rgba(62,171,217,.34)}
.iconAction img{width:21px;height:21px;display:block}
.iconCart b{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:#173c55;color:#fff;font-size:11px;font-weight:900;box-shadow:0 8px 18px rgba(23,60,85,.18)}
.searchBackdrop{display:none;position:fixed;inset:0;background:rgba(12,33,47,.28);z-index:88;backdrop-filter:blur(4px)}
.searchBackdrop.open{display:block}
.searchOverlay{position:fixed;top:102px;left:50%;transform:translateX(-50%) translateY(-10px);width:min(760px,calc(100% - 28px));z-index:91;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.searchOverlay.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.searchPanel{background:rgba(255,255,255,.98);border:1px solid rgba(62,171,217,.18);border-radius:28px;box-shadow:0 30px 70px rgba(35,93,125,.16);overflow:hidden}
.searchHead{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid #edf4f7}.searchHead strong{font-size:22px;color:#173c55}.searchHead button{width:38px;height:38px;border:0;border-radius:12px;background:#eef8fc;color:#315a72;font-size:22px;cursor:pointer}
.searchField{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid #edf4f7}.searchField img{width:22px;height:22px;opacity:.9}.searchField input{border:0;background:transparent;padding:0;font-size:18px;color:#173b55}.searchField input:focus{outline:none}.searchResults{padding:8px 12px 14px;max-height:min(62vh,520px);overflow:auto}.searchHint{padding:14px 12px 18px;color:#6e8798;line-height:1.6}.searchHit{display:block;padding:14px 12px;border-radius:18px;margin:3px 0;transition:background .16s ease,transform .16s ease}.searchHit:hover{background:#f4fbfe;transform:translateX(2px)}.searchHit span{display:block;color:#37a4d4;font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}.searchHit strong{display:block;color:#173b55;font-size:18px;margin-bottom:3px}.searchHit small{display:block;color:#7993a1;line-height:1.45}.searchEmpty{padding:20px 12px;color:#708998}.shopPrimary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 17px;border:0;border-radius:15px;background:#173c55;color:#fff;font-weight:800;cursor:pointer}
@media(max-width:1180px){.navrow.mobile-open .nav.utility{display:flex;width:100%;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:10px;padding-top:10px;border-top:1px solid #edf4f7;margin-top:4px}.navrow.mobile-open .nav.utility .navlink{width:auto}.searchOverlay{top:86px}}
@media(max-width:760px){.iconAction{width:42px;height:42px}.searchOverlay{top:74px;width:min(calc(100% - 18px),760px)}.searchHead strong{font-size:20px}.searchField{padding:14px 16px}.searchResults{padding:8px 10px 12px}}
/* V28 – cleaner search, modern cart, visible input caret */
.searchPanel{border-radius:24px;box-shadow:0 30px 80px rgba(29,82,111,.18);border-color:rgba(76,181,220,.22)}
.searchHead{padding:18px 22px}.searchHead strong{font-size:20px;letter-spacing:-.02em}
.searchField{padding:18px 22px;background:#fff}.searchField input{font-weight:520!important;font-size:18px!important;color:#18384e!important;caret-color:#19b9d6!important;letter-spacing:0!important}.searchField input::placeholder{font-weight:500;color:#9aaab4;opacity:1}.searchField:focus-within{box-shadow:inset 0 0 0 2px rgba(25,185,214,.2)}
.searchResults:empty{display:none}.searchResults{padding:8px 12px 14px}
.searchHit{border-bottom:1px solid #edf4f7;border-radius:14px}.searchHit:last-child{border-bottom:0}
.cartDrawer{width:min(500px,100%);background:linear-gradient(180deg,#fff 0%,#fbfeff 65%,#f2fbfe 100%);box-shadow:-26px 0 80px rgba(18,64,91,.2)}
.cartHeader{padding:24px 26px;background:rgba(255,255,255,.9);backdrop-filter:blur(16px)}.cartEyebrow{display:block;margin-bottom:4px;color:#32a9d5;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.cartHeader h2{font-size:30px;letter-spacing:-.035em}.cartHeader button{background:#eef9fd;color:#315a72;transition:.16s}.cartHeader button:hover{background:#dff4fb;transform:rotate(3deg)}
.cartItems{padding:16px 22px 22px}.cartLine{align-items:center;margin-bottom:12px;padding:18px;border:1px solid rgba(68,153,194,.13);border-radius:20px;background:rgba(255,255,255,.92);box-shadow:0 10px 28px rgba(52,122,157,.06)}.cartLine:last-child{border-bottom:1px solid rgba(68,153,194,.13)}.cartProduct{min-width:0}.cartCategory{display:block;color:#39a6d2!important;font-size:10px!important;font-weight:900!important;letter-spacing:.08em;text-transform:uppercase;margin:0 0 5px!important}.cartProduct strong{font-size:15px;color:#173c55}.cartPrice{font-size:13px!important;color:#668496!important;margin-top:6px!important}.cartSetup{display:inline-flex!important;margin-top:7px!important;padding:5px 8px;border-radius:999px;background:#eff9fd;color:#58798b!important;font-size:10px!important;font-weight:750}.qty{flex:0 0 auto}.qty button{width:32px;height:32px;border-radius:11px;border-color:#d9eaf1;background:#fff;color:#173c55}.qty button:hover{background:#eef9fd}.qty b{min-width:18px;text-align:center}.qty .trash{margin-left:8px;color:#b15b5b;background:#fff8f8;border-color:#f0dada}
.cartTotals{padding:20px 24px 24px;background:linear-gradient(180deg,#f6fcff,#eaf8fd);border-top:1px solid #dceff6}.cartSummaryBlock{padding:14px 16px;border:1px solid rgba(67,159,201,.13);border-radius:18px;background:rgba(255,255,255,.72);margin-bottom:10px}.cartSummaryBlock.recurring{background:rgba(233,249,255,.8)}.totalRow{padding:5px 0;font-size:13px}.totalRow strong{color:#173c55}.totalRow.vat{color:#728c9b}.totalRow.totalPrimary{margin-top:6px;padding-top:10px;border-top:1px solid #e1eef4;font-size:16px;font-weight:900;color:#173c55}.totalRow.totalPrimary strong{font-size:18px}.cartTaxNote{margin:12px 2px 16px;color:#718a99;font-size:11px;line-height:1.55}.cartTotals .shopPrimary{width:100%;min-height:50px;border-radius:16px;background:linear-gradient(135deg,#23a8c4,#54a4f2);box-shadow:0 14px 30px rgba(36,151,196,.18)}
.cartEmpty{display:grid;justify-items:center;padding:58px 20px;color:#718b9b}.cartEmptyIcon{width:52px;height:52px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(145deg,#e5f8ff,#f6fdff);color:#2aa8d2;font-size:28px;margin-bottom:14px}.cartEmpty strong{font-size:18px;color:#214d65}.cartEmpty p{margin:7px 0 14px;text-align:center}.cartEmpty a{color:#249ac7;font-weight:800}
/* =========================
V29 – Search geometry + unified SU-IT service/platform palette
========================= */
:root{
--suit-navy:#173b55;
--suit-blue:#4e93f4;
--suit-sky:#69bdf6;
--suit-cyan:#8ce4f9;
--suit-turq:#23b7cf;
--suit-pale:#eefaff;
--suit-pale2:#f8fdff;
--suit-border:rgba(57,157,199,.16);
--suit-shadow:0 18px 54px rgba(56,129,164,.09);
}
/* Search: prevent the first character/caret from being visually clipped. */
.searchField{
display:grid!important;
grid-template-columns:26px minmax(0,1fr);
align-items:center;
column-gap:15px!important;
padding:15px 22px 15px 24px!important;
min-height:72px;
}
.searchField img{width:22px!important;height:22px!important;justify-self:center}
.searchField input{
display:block!important;
width:100%!important;
min-width:0!important;
height:42px!important;
line-height:42px!important;
padding:0 8px 0 3px!important;
margin:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
font-size:18px!important;
font-weight:450!important;
color:#244b62!important;
caret-color:#16bad3!important;
text-indent:0!important;
overflow:visible!important;
}
.searchField input::placeholder{font-weight:450!important;color:#9aaab4!important;opacity:1}
.searchField input:focus{outline:none!important}
.searchField:focus-within{box-shadow:inset 0 0 0 2px rgba(35,183,207,.16)!important}
/* Individual service pages: same bright SU-IT language as the current homepage. */
.servicePage{background:#fff;color:#244b62}
.servicePage .pageHero{
background:
radial-gradient(circle at 84% 18%,rgba(140,228,249,.30),transparent 29%),
radial-gradient(circle at 68% 74%,rgba(78,147,244,.10),transparent 32%),
linear-gradient(180deg,#ffffff 0%,#f4fcff 55%,#edfaff 100%)!important;
border-bottom:1px solid rgba(76,171,211,.10);
}
.servicePage .pageHero .k,.servicePage .k{color:#23a9c8!important}
.servicePage .soft{
background:linear-gradient(180deg,#f7fdff 0%,#eefaff 52%,#fbfeff 100%)!important;
}
.servicePage .feature span,
.servicePage .speed,
.servicePage .planEyebrow,
.servicePage .productBadge{color:#20a9c8!important}
.servicePage .productBadge,.servicePage .planBadge{
background:linear-gradient(135deg,#e7fbff,#eef6ff)!important;
border:1px solid rgba(35,183,207,.12);
color:#178aa8!important;
}
.servicePage .glass,
.servicePage .shopPrimary,
.servicePage .shopAdd{
background:linear-gradient(135deg,#23b7cf 0%,#55b8e4 52%,#4e93f4 100%)!important;
color:#fff!important;
border:0!important;
box-shadow:0 13px 30px rgba(45,163,209,.17)!important;
}
.servicePage .glass:hover,
.servicePage .shopPrimary:hover,
.servicePage .shopAdd:hover{
background:linear-gradient(135deg,#1da9c1 0%,#4aaedc 52%,#4389e8 100%)!important;
transform:translateY(-1px);
}
.servicePage .ghost{
background:rgba(255,255,255,.84)!important;
border:1px solid rgba(52,164,206,.20)!important;
color:#2d789a!important;
}
.servicePage .ctaBand{
background:linear-gradient(135deg,rgba(226,248,255,.94),rgba(247,252,255,.98))!important;
border-color:rgba(35,183,207,.16)!important;
box-shadow:0 16px 44px rgba(56,129,164,.07);
}
/* Business platform: remove the old dark-shop look and match current SU-IT site. */
.platformPage{
background:#fff;
color:#244b62;
}
.platformPage .shopHero,
.platformPage .shopSection.soft{
background:
radial-gradient(circle at 82% 12%,rgba(140,228,249,.22),transparent 30%),
linear-gradient(180deg,#fff,#f2fbff 58%,#f8fdff)!important;
}
.platformPage .shopHero h1,
.platformPage .shopHead h2,
.platformPage .packageCard h3,
.platformPage .shopProduct h3,
.platformPage .platformMini strong,
.platformPage .portalMain h3,
.platformPage .securityCard h3{
color:#285b77!important;
}
.platformPage .shopHero p.lead,
.platformPage .shopHead p,
.platformPage .packageCard li,
.platformPage .shopProduct .productTop span,
.platformPage .platformMini p,
.platformPage .portalRow,
.platformPage .securityCard ol,
.platformPage .securityCard ul{
color:#68879a!important;
}
.platformPage .shopHeroCard,
.platformPage .packageCard,
.platformPage .shopProduct,
.platformPage .platformMini,
.platformPage .portalStats div,
.platformPage .securityCard{
background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,253,255,.98))!important;
border:1px solid var(--suit-border)!important;
box-shadow:var(--suit-shadow)!important;
}
.platformPage .packageCard.recommended,
.platformPage .shopProduct.featured{
border-color:rgba(35,183,207,.32)!important;
box-shadow:0 22px 66px rgba(45,151,193,.13)!important;
}
.platformPage .packageBadge,
.platformPage .productBadge,
.platformPage .contractMini span{
background:linear-gradient(135deg,#e6faff,#eef6ff)!important;
color:#218dab!important;
border:1px solid rgba(35,183,207,.10);
}
.platformPage .packageCard .price,
.platformPage .productPrice strong,
.platformPage .shopHeroStats strong,
.platformPage .portalStats strong{
color:#2e6685!important;
}
.platformPage .packageCard li:before,
.platformPage .shopProduct li:before{color:#23b7cf!important}
.platformPage .shopPrimary,
.platformPage .shopAdd,
.platformPage .filterBar button.active,
.platformPage .filterBar button:hover{
background:linear-gradient(135deg,#23b7cf 0%,#55b8e4 52%,#4e93f4 100%)!important;
color:#fff!important;
box-shadow:0 13px 30px rgba(45,163,209,.16)!important;
}
.platformPage .shopPrimary:hover,
.platformPage .shopAdd:hover{
background:linear-gradient(135deg,#1da9c1 0%,#4aaedc 52%,#4389e8 100%)!important;
}
.platformPage .shopSecondary,
.platformPage .filterBar button{
background:#fff!important;
color:#397690!important;
border:1px solid rgba(52,164,206,.18)!important;
}
.platformPage .portalPreview{
background:linear-gradient(145deg,#eafaff,#f8fdff)!important;
border-color:rgba(35,183,207,.14)!important;
}
.platformPage .portalSide{
background:linear-gradient(155deg,#dff8ff,#eef6ff)!important;
color:#285b77!important;
border:1px solid rgba(35,183,207,.15);
}
.platformPage .portalSide img{filter:none!important}
.platformPage .portalSide a{color:#5c8094!important}
.platformPage .portalSide a:first-of-type{color:#209ab8!important;font-weight:850}
.platformPage .portalTable{border:1px solid rgba(57,157,199,.10)}
/* Overview pages get the same lighter treatment without changing their layout. */
.overviewPage .pageHero{
background:radial-gradient(circle at 80% 18%,rgba(140,228,249,.26),transparent 30%),linear-gradient(180deg,#fff,#eefaff)!important;
}
.overviewPage .pageHero h1,.overviewPage .center h2{color:#285b77!important}
.overviewPage .serviceCard,.overviewPage .overviewCard{
border:1px solid rgba(255,255,255,.7)!important;
background:linear-gradient(160deg,rgba(255,255,255,.8),rgba(255,255,255,.5))!important;
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
box-shadow:0 26px 60px rgba(42,96,126,.14),inset 0 1px 0 rgba(255,255,255,.7)!important;
}
.overviewPage .serviceCard:has(>.overviewIcon){padding:30px}
.overviewPage .serviceCard:has(>.overviewIcon) h3{margin:0 0 10px;font-size:22px;color:#173b55}
.overviewPage .serviceCard:has(>.overviewIcon) p{margin:0;color:#6d8798;line-height:1.6}
.overviewPage .overviewIcon{width:52px;height:52px;border-radius:16px;box-shadow:0 10px 22px rgba(42,96,126,.24),inset 0 1px 0 rgba(255,255,255,.35)}
.overviewPage .overviewIcon svg{width:26px;height:26px}
.overviewPage .glass{
background:linear-gradient(135deg,#23b7cf,#55b8e4 58%,#4e93f4)!important;
color:#fff!important;
border:0!important;
}
@media(max-width:680px){
.searchField{grid-template-columns:24px minmax(0,1fr);column-gap:12px!important;padding-left:16px!important;padding-right:16px!important}
.searchField input{font-size:17px!important;padding-left:2px!important}
}
/* V30 – public-launch cleanup */
.confidenceSection{padding:34px 0 22px;background:#fff;position:relative;overflow:hidden}
.confidenceSection:before,.confidenceSection:after{content:"";position:absolute;top:18%;width:320px;height:110px;background:radial-gradient(ellipse at center,rgba(150,205,235,.4),rgba(150,205,235,0) 70%);filter:blur(6px);animation:cloudDrift 34s linear infinite}
.confidenceSection:after{top:52%;width:220px;height:80px;background:radial-gradient(ellipse at center,rgba(180,190,255,.32),rgba(180,190,255,0) 70%);animation-duration:46s;animation-delay:-14s}
@keyframes cloudDrift{from{transform:translateX(-30%)}to{transform:translateX(130vw)}}
.confidenceBand{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid rgba(77,162,203,.16);border-radius:26px;background:linear-gradient(135deg,rgba(244,252,255,.96),rgba(232,248,255,.82));box-shadow:0 18px 46px rgba(68,132,163,.07);overflow:hidden}
.confidenceBand>div{padding:25px 28px;min-width:0}
.confidenceBand>div+div{border-left:1px solid rgba(77,162,203,.13)}
.confidenceBand span{display:block;color:#39a6d5;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
.confidenceBand strong{display:block;color:#173c55;font-size:20px;letter-spacing:-.02em;margin-bottom:5px}
.confidenceBand p{margin:0;color:#6f8998;line-height:1.55;font-size:13px}
.partnerPending{display:none!important}
@media(max-width:760px){.confidenceBand{grid-template-columns:1fr}.confidenceBand>div+div{border-left:0;border-top:1px solid rgba(77,162,203,.13)}}
/* V32 – footer payment methods */
.paymentMethods{margin-top:26px;padding-top:18px;border-top:1px solid rgba(56,150,193,.16);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.paymentMethodsLabel{display:flex;flex-direction:column;gap:2px;color:#5f8092;font-size:12px}.paymentMethodsLabel strong{color:#315a72;font-size:13px}.paymentBadges{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.payBadge{height:30px;min-width:58px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(255,255,255,.72);border:1px solid rgba(72,157,199,.15);color:#274d63;font-size:11px;font-weight:850;letter-spacing:.01em;box-shadow:0 5px 14px rgba(68,132,163,.05)}
.payBadge.visa{font-style:italic;letter-spacing:.05em}.payBadge.mastercard:before{content:"";width:13px;height:13px;border-radius:50%;background:rgba(45,120,166,.22);box-shadow:8px 0 0 rgba(70,194,226,.34);margin-right:12px}.payBadge.amex{font-size:10px}.payBadge.wallet{font-weight:750}.payBadge.twint{letter-spacing:.08em}.payBadge.link{font-style:italic}
@media(max-width:760px){.paymentMethods{align-items:flex-start;flex-direction:column}.paymentBadges{gap:6px}.payBadge{height:28px;min-width:54px;padding:0 9px;font-size:10px}}
/* =========================
V33 – Apple Business page
Apple-specific, all other pages untouched
========================= */
.appleBusinessPage{background:#fff;color:#142d3d}.appleBusinessMain{overflow:hidden}.appleBusinessMain .section{padding:110px 0}.abEyebrow{margin:0 0 14px;color:#55c9ed;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.abHero{position:relative;background:radial-gradient(circle at 82% 20%,rgba(98,224,250,.19),transparent 28%),linear-gradient(145deg,#07111a 0%,#0a1b28 53%,#0d2b3b 100%);color:#fff;padding:92px 0 82px;overflow:hidden}.abHero:after{content:"";position:absolute;width:620px;height:620px;border-radius:50%;right:-220px;bottom:-360px;background:radial-gradient(circle,rgba(65,191,232,.22),transparent 68%);filter:blur(4px)}.abHeroGrid{display:grid;grid-template-columns:.88fr 1.12fr;gap:56px;align-items:center;position:relative;z-index:1}.abHeroCopy h1{font-size:clamp(54px,6.2vw,94px);line-height:.94;letter-spacing:-.06em;margin:0 0 26px;max-width:760px}.abHeroCopy h1 span{color:#8ee7fb}.abLead{font-size:19px;line-height:1.72;color:rgba(235,248,255,.74);max-width:690px}.abHeroActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.abPrimary,.abSecondary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:15px;font-weight:850;transition:.2s}.abPrimary{background:linear-gradient(135deg,#28b9dc,#4f9cf6);color:#fff;box-shadow:0 16px 38px rgba(40,185,220,.18)}.abPrimary:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(40,185,220,.24)}.abSecondary{border:1px solid rgba(102,201,234,.25);background:rgba(255,255,255,.88);color:#173e56}.abHero .abSecondary{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2);backdrop-filter:blur(18px)}.abTrust{margin:22px 0 0;color:rgba(225,244,252,.48);font-size:12px;line-height:1.5;max-width:620px}.abHeroVisual{position:relative;min-height:520px;border-radius:34px;overflow:hidden;background:#080d12;border:1px solid rgba(255,255,255,.1);box-shadow:0 35px 90px rgba(0,0,0,.3)}.abHeroScene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.9}.abHeroVisual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(3,14,23,.72))}.abHeroGlass{position:absolute;z-index:2;left:24px;bottom:24px;padding:18px 20px;border-radius:20px;background:rgba(5,27,40,.58);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(18px)}.abHeroGlass span{display:block;color:#76dcf5;font-size:11px;font-weight:900;letter-spacing:.1em}.abHeroGlass strong{display:block;margin-top:6px;font-size:18px}.abStatement{background:#fff}.abStatementInner{max-width:980px;text-align:center}.abStatement h2,.abSectionHead h2,.abCopy h2,.abSecurity h2,.abExpertise h2,.abContact h2,.abProcurement h2{font-size:clamp(40px,5vw,70px);line-height:1.03;letter-spacing:-.05em;margin:0;color:#153b55}.abStatement h2 span{color:#48acd8}.abStatement p:last-child{max-width:800px;margin:22px auto 0;color:#6a8596;font-size:18px;line-height:1.7}.abDevices{background:linear-gradient(180deg,#f7fcfe,#eaf8fe)}.abSectionHead{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:48px}.abSectionHead>p{max-width:430px;color:#6f8999;line-height:1.7}.abDeviceMosaic{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}.abDeviceCard{overflow:hidden;border-radius:30px;background:#fff;border:1px solid rgba(66,160,201,.15);box-shadow:0 24px 65px rgba(42,115,150,.09)}.abMac{grid-row:span 2;display:grid;grid-template-rows:auto 1fr;min-height:780px}.abIpad,.abIphone{min-height:376px}
.abIpad>*,.abIphone>*{min-width:0}.abIpad{display:grid;grid-template-columns:.48fr .52fr}.abIphone{display:grid;grid-template-columns:.55fr .45fr}.abDeviceCopy{padding:34px}.abDeviceCopy>span{color:#43abd7;font-size:11px;font-weight:900;letter-spacing:.14em}.abDeviceCopy h3{font-size:clamp(30px,3vw,46px);line-height:1.03;letter-spacing:-.04em;margin:10px 0 14px;color:#163d56}.abDeviceCopy p{color:#6e8999;line-height:1.65}.abPills{display:flex;gap:7px;flex-wrap:wrap;margin-top:20px}.abPills b{padding:7px 9px;border-radius:999px;background:#eef9fd;color:#4c788e;font-size:10px}.abPills.big b{font-size:11px;padding:8px 10px}.abDeviceImage{min-height:280px;background:#f2f4f7;overflow:hidden}.abDeviceImage img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.abDeviceCard:hover img{transform:scale(1.025)}.abMac .abDeviceImage img{object-fit:cover}.abTall img{object-position:center}.abManager{background:#fff}.abSplit{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}.abCopy>p{color:#6d8798;line-height:1.7;font-size:17px}.abTextLink{display:inline-block;margin-top:12px;color:#2399c9;font-weight:850}.abFlowCard{padding:32px;border-radius:30px;background:linear-gradient(145deg,#f3fbfe,#fff);border:1px solid rgba(72,157,199,.17);box-shadow:0 26px 70px rgba(41,112,147,.1)}.abFlowStep{display:flex;align-items:center;gap:16px;padding:17px 18px;border-radius:18px;background:#fff;border:1px solid #e7f1f5}.abFlowStep small{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#edf9fd;color:#3ba5d3;font-weight:900}.abFlowStep strong{color:#244e65}.abFlowStep.focus{background:#0e2737;border-color:#0e2737}.abFlowStep.focus strong{color:#fff}.abFlowStep.focus small{background:#53c8ed;color:#082232}.abFlowStep.ready{background:linear-gradient(135deg,#dff8ff,#ecfbff);border-color:#a9e8f8}
.abFlowStep[data-step]{transition:background .5s ease,border-color .5s ease,box-shadow .5s ease}
.abFlowStep[data-step] strong{transition:color .5s ease}
.abFlowStep[data-step] small{transition:background .5s ease,color .5s ease}
.abFlowStep[data-step="1"]{--flow-color:#34c77a;--flow-glow:rgba(52,199,122,.38)}
.abFlowStep[data-step="2"]{--flow-color:#f2c94c;--flow-glow:rgba(242,201,76,.4)}
.abFlowStep[data-step="3"]{--flow-color:#ff9f43;--flow-glow:rgba(255,159,67,.38)}
.abFlowStep[data-step="4"]{--flow-color:#ff6b6b;--flow-glow:rgba(255,107,107,.38)}
.abFlowStep[data-step="5"]{--flow-color:#9b6cff;--flow-glow:rgba(155,108,255,.38)}
.abFlowCard .abFlowStep[data-step="1"]{animation:abFlowChaseBg 10s ease-in-out infinite;animation-delay:0s}
.abFlowCard .abFlowStep[data-step="2"]{animation:abFlowChaseBg 10s ease-in-out infinite;animation-delay:2s}
.abFlowCard .abFlowStep[data-step="3"]{animation:abFlowChaseBg 10s ease-in-out infinite;animation-delay:4s}
.abFlowCard .abFlowStep[data-step="4"]{animation:abFlowChaseBg 10s ease-in-out infinite;animation-delay:6s}
.abFlowCard .abFlowStep[data-step="5"]{animation:abFlowChaseBg 10s ease-in-out infinite;animation-delay:8s}
.abFlowStep[data-step="1"] strong{animation:abFlowChaseText 10s ease-in-out infinite;animation-delay:0s}
.abFlowStep[data-step="2"] strong{animation:abFlowChaseText 10s ease-in-out infinite;animation-delay:2s}
.abFlowStep[data-step="3"] strong{animation:abFlowChaseText 10s ease-in-out infinite;animation-delay:4s}
.abFlowStep[data-step="4"] strong{animation:abFlowChaseText 10s ease-in-out infinite;animation-delay:6s}
.abFlowStep[data-step="5"] strong{animation:abFlowChaseText 10s ease-in-out infinite;animation-delay:8s}
.abFlowStep[data-step="1"] small{animation:abFlowChaseBadge 10s ease-in-out infinite;animation-delay:0s}
.abFlowStep[data-step="2"] small{animation:abFlowChaseBadge 10s ease-in-out infinite;animation-delay:2s}
.abFlowStep[data-step="3"] small{animation:abFlowChaseBadge 10s ease-in-out infinite;animation-delay:4s}
.abFlowStep[data-step="4"] small{animation:abFlowChaseBadge 10s ease-in-out infinite;animation-delay:6s}
.abFlowStep[data-step="5"] small{animation:abFlowChaseBadge 10s ease-in-out infinite;animation-delay:8s}
@keyframes abFlowChaseBg{
0%,16%,100%{background:#fff;border-color:#e7f1f5;box-shadow:none}
4%,12%{background:var(--flow-color);border-color:var(--flow-color);box-shadow:0 14px 30px var(--flow-glow)}
}
@keyframes abFlowChaseText{
0%,16%,100%{color:#244e65}
4%,12%{color:#fff}
}
@keyframes abFlowChaseBadge{
0%,16%,100%{background:#edf9fd;color:#3ba5d3}
4%,12%{background:rgba(255,255,255,.92);color:var(--flow-color)}
}.abFlowCard i{display:block;width:2px;height:20px;background:linear-gradient(#bae7f3,#d8f4fa);margin:auto}.abZeroTouch{background:#081722;color:#fff}.abZeroHead{display:grid;grid-template-columns:1fr .75fr;gap:48px;align-items:end}.abZeroHead h2{font-size:clamp(44px,5.2vw,74px);letter-spacing:-.05em;margin:0}.abZeroHead>p{color:rgba(232,246,252,.68);line-height:1.7}.abTimeline{display:flex;align-items:center;gap:10px;margin-top:44px;padding:24px;border-radius:24px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);overflow:auto}.abTimeline span{white-space:nowrap;padding:11px 13px;border-radius:12px;background:rgba(255,255,255,.07);font-size:12px;font-weight:800;color:#d7edf5}.abTimeline span.active{background:#55c9ed;color:#092131}.abTimeline b{color:#53c6e9}.abMdm{background:#f4fbfe}.abMdmGrid{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center}.abMdmVisual{position:relative;min-height:640px;border-radius:34px;overflow:hidden;box-shadow:0 30px 75px rgba(30,98,132,.16)}.abMdmVisual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.abMdmVisual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,24,35,.72))}.abMdmOverlay{position:absolute;z-index:2;left:28px;bottom:28px;color:#fff}.abMdmOverlay span{font-size:11px;font-weight:900;letter-spacing:.12em;color:#76dff6}.abMdmOverlay strong{display:block;font-size:26px;margin-top:7px}.abMdmCopy h2{font-size:clamp(40px,4.4vw,64px);line-height:1.03;letter-spacing:-.05em;color:#173d56}.abFeatureColumns{display:grid;gap:12px;margin-top:28px}.abFeatureColumns>div{padding:18px 20px;border-radius:18px;background:#fff;border:1px solid #e5f1f5}.abFeatureColumns h3{margin:0 0 6px;color:#1e5069}.abFeatureColumns p{margin:0;color:#718d9c;line-height:1.55}.abTechOpen{font-size:12px!important;color:#88a0ad!important}.abMicrosoft{background:linear-gradient(145deg,#07131d,#0d2b3c);color:#fff}.abSectionHead.light h2{color:#fff}.abSectionHead.light>p{color:rgba(230,246,252,.65)}.abMsCanvas{display:grid;grid-template-columns:.75fr 90px 1.25fr;align-items:center;gap:22px;padding:38px;border-radius:30px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09)}.abMsDevice{padding:34px;border-radius:24px;background:linear-gradient(145deg,#effbff,#cfeffd);color:#123a53}.abMsDevice strong{display:block;font-size:26px}.abMsDevice small{display:block;margin-top:7px;color:#6d8998}.abMsLine{height:2px;background:linear-gradient(90deg,#56c9ed,#91e8fb);position:relative}.abMsLine:after{content:"";position:absolute;right:-2px;top:-4px;width:10px;height:10px;border-radius:50%;background:#8ae6fa}.abMsStack{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.abMsStack span{padding:15px 17px;border-radius:14px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.09);color:#e9f8fc;font-weight:750}.abMsStatement{text-align:center;margin:28px 0 0;color:#8edff5;font-size:20px;font-weight:800}.abSecurity{background:#0b1b26;color:#fff}.abSecurityGrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:54px}.abSecurity h2{color:#fff}.abSecurityGrid>div:first-child>p:last-child{color:rgba(229,246,251,.64);line-height:1.7}.abSecurityGroups{display:grid;gap:14px}.abSecurityGroups article{padding:24px;border-radius:22px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)}.abSecurityGroups span{color:#5dcbea;font-size:11px;font-weight:900;letter-spacing:.1em}.abSecurityGroups h3{font-size:27px;margin:8px 0;color:#fff}.abSecurityGroups p{margin:0;color:rgba(230,246,252,.62);line-height:1.6}.abSupport{background:#fff}.abSupportGrid{display:grid;grid-template-columns:1.06fr .94fr;gap:54px;align-items:center}.abSupportImage{height:520px;border-radius:32px;overflow:hidden;background:#07131d}.abSupportImage img{width:100%;height:100%;object-fit:cover}.abLifecycle{background:#eff9fd}.abLifecycleRail{display:flex;gap:9px;overflow:auto;padding:18px 0 8px}.abLifecycleRail span{flex:0 0 auto;padding:13px 16px;border-radius:999px;background:#fff;border:1px solid #dcecf3;color:#4f778c;font-size:12px;font-weight:850}.abLifecycleRail span:after{content:" →";color:#56badf}.abLifecycleRail span:last-child:after{display:none}.abOffers{background:#fff}.abOfferLayout{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.abOfferMain,.abOfferSmall,.abOfferWide{border-radius:28px;border:1px solid #dfeef4;background:#f9fdff;box-shadow:0 20px 52px rgba(52,119,151,.07)}.abOfferMain{grid-row:span 2;padding:38px;background:linear-gradient(145deg,#0a1b28,#0f3346);color:#fff}.abOfferMain span,.abOfferSmall span,.abOfferWide span{color:#59c9ed;font-size:11px;font-weight:900;letter-spacing:.1em}.abOfferMain h3{font-size:52px;margin:16px 0 0}.abOfferMain small{color:#9bc5d6}.abOfferMain p{line-height:1.7;color:#d0e6ef}.abOfferSmall{padding:32px}.abOfferSmall h3,.abOfferWide h3{font-size:34px;margin:12px 0 4px;color:#183f57}.abOfferSmall p,.abOfferWide p{color:#6e8999;line-height:1.6}.abOfferWide{grid-column:1/-1;padding:28px 32px;display:grid;grid-template-columns:.7fr 1.3fr;gap:30px;align-items:center}.abOfferWide h3{font-size:27px}.abProcurement{background:linear-gradient(145deg,#eefbff,#fff)}.abProcurementGrid{display:grid;grid-template-columns:.95fr 1.05fr;gap:40px;align-items:center}.abProcurementGrid>div>p{color:#6d8798;line-height:1.7}.abProcurementDevices{height:440px;position:relative;border-radius:34px;background:radial-gradient(circle at 65% 40%,#d9f5fd,#f5fbfd 68%);overflow:hidden}.abProcurementDevices img{position:absolute;object-fit:contain}.abProcurementDevices img:first-child{height:95%;left:7%;bottom:-9%}.abProcurementDevices img:last-child{width:52%;right:2%;bottom:0;border-radius:24px;box-shadow:0 20px 50px rgba(33,85,111,.15)}.abExpertise{background:#07131d;color:#fff}.abExpertiseInner{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.abExpertise h2{color:#fff}.abExpertiseInner>div:first-child>p:last-child{color:rgba(230,246,252,.64);line-height:1.7}.abCertPrep{padding:28px;border-radius:24px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09)}.abCertPrep span{display:block;color:#5ccdef;font-size:10px;font-weight:900;letter-spacing:.12em;margin-bottom:13px}.abCertPrep strong{display:block;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:17px}.abCertPrep small{display:block;margin-top:14px;color:#8faebb}.abContact{background:#f1fbfe}.abContactInner{display:flex;align-items:center;justify-content:space-between;gap:42px}.abContactInner>div{max-width:820px}.abContactInner p:last-child{color:#6f8999;line-height:1.7}.abLegal{padding:18px 0 30px;background:#f1fbfe}.abLegal p{margin:0;color:#91a4ae;font-size:10px;line-height:1.55}.appleHomeFeature{padding:70px 0;background:linear-gradient(145deg,#07131d,#0f3143);color:#fff}.appleHomeFeatureInner{display:grid;grid-template-columns:.9fr 1.1fr;gap:42px;align-items:center}.appleHomeCopy h2{font-size:clamp(38px,4vw,58px);line-height:1.03;letter-spacing:-.05em;margin:0 0 18px}.appleHomeCopy h2 span{color:#88e4fa}.appleHomeCopy p{color:rgba(231,247,252,.68);line-height:1.7;max-width:620px}.appleHomeCopy .ghost{margin-top:10px;color:#fff;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.07)}.appleHomeVisual{height:330px;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}.appleHomeVisual img{width:100%;height:100%;object-fit:cover}
@media(max-width:1040px){.abHeroGrid,.abSplit,.abMdmGrid,.abSecurityGrid,.abSupportGrid,.abProcurementGrid,.abExpertiseInner{grid-template-columns:1fr}.abDeviceMosaic{grid-template-columns:1fr}.abMac{grid-row:auto;min-height:620px}.abIpad,.abIphone{min-height:360px}.abZeroHead{grid-template-columns:1fr}.abMsCanvas{grid-template-columns:1fr}.abMsLine{height:50px;width:2px;margin:auto}.abMsStack{grid-template-columns:repeat(2,1fr)}.abOfferLayout{grid-template-columns:1fr}.abOfferMain{grid-row:auto}.abOfferWide{grid-column:auto}.appleHomeFeatureInner{grid-template-columns:1fr}}
@media(max-width:760px){.appleBusinessMain .section{padding:76px 0}.abHero{padding:60px 0}.abHeroVisual{min-height:390px}.abHeroCopy h1{font-size:48px}.abSectionHead,.abContactInner{align-items:flex-start;flex-direction:column}.abDeviceMosaic{display:block}.abDeviceCard{margin-bottom:16px}.abMac{display:block;min-height:0}.abIpad,.abIphone{display:flex;flex-direction:column;min-height:0}.abIpad .abDeviceImage{order:2}.abDeviceImage{height:300px}.abDeviceCopy{padding:26px}.abMsStack{grid-template-columns:1fr}.abOfferWide{grid-template-columns:1fr}.abProcurementDevices{height:360px}.abLifecycleRail{padding-bottom:14px}.abTimeline{padding:18px}.appleHomeVisual{height:250px}}
/* --- V34 Apple refinement overrides --- */
.appleBusinessMain .section{padding:88px 0}
.appleBusinessPage{background:#f7fcff;color:#15384f}
.abEyebrow{color:#39b9e4}
.abPrimary{background:linear-gradient(135deg,#35bee7,#5eaef9);box-shadow:0 16px 34px rgba(71,181,231,.18)}
.abPrimary:hover{box-shadow:0 18px 40px rgba(71,181,231,.22)}
.abSecondary{border:1px solid rgba(89,180,214,.18);background:rgba(255,255,255,.86);color:#173e56}
.abHero{position:relative;background:radial-gradient(circle at 16% 14%,rgba(117,220,248,.42),transparent 30%),radial-gradient(circle at 82% 15%,rgba(97,189,245,.34),transparent 28%),linear-gradient(180deg,#f8fdff 0%,#ebf8fd 52%,#effbfe 100%);color:#16384f;padding:74px 0 60px;overflow:hidden}
.abHero:after{width:560px;height:560px;right:-180px;bottom:-300px;background:radial-gradient(circle,rgba(95,203,236,.2),transparent 68%)}
.abHeroCopy h1{font-size:clamp(46px,5.2vw,78px);line-height:.98;letter-spacing:-.055em;font-weight:800;color:#153b53;margin:0 0 22px}
.abHeroCopy h1 span{color:#46b9e1}
.abLead{font-size:18px;line-height:1.68;color:#5d7a8b;max-width:660px}
.abTrust{margin:18px 0 0;color:#84a1af;font-size:12px;line-height:1.55;max-width:620px}
.abHeroVisual{min-height:450px;border-radius:34px;overflow:hidden;background:linear-gradient(145deg,#effaff,#ddf4fb);border:1px solid rgba(109,195,224,.24);box-shadow:0 28px 64px rgba(56,135,170,.16)}
.abHeroScene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.97;animation:abSceneFloat 13s ease-in-out infinite alternate;transform-origin:center center}
.abHeroVisual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.02) 12%,rgba(9,33,46,.18) 100%)}
.abHeroGlass{left:24px;bottom:24px;padding:18px 20px;border-radius:22px;background:rgba(255,255,255,.68);border:1px solid rgba(104,194,226,.26);backdrop-filter:blur(18px);box-shadow:0 14px 34px rgba(57,136,172,.12)}
.abHeroGlass span{display:block;color:#2fb5df;font-size:11px;font-weight:900;letter-spacing:.1em}
.abHeroGlass strong{display:block;margin-top:6px;font-size:18px;color:#17384d}
.abHero .abSecondary{background:rgba(255,255,255,.72);color:#173e56;border-color:rgba(104,194,226,.26);backdrop-filter:blur(16px)}
.abStatement h2,.abSectionHead h2,.abCopy h2,.abSecurity h2,.abExpertise h2,.abContact h2,.abProcurement h2,.abMdmCopy h2{font-size:clamp(34px,4.4vw,58px);line-height:1.04;letter-spacing:-.05em;font-weight:800}
.abStatement p:last-child,.abCopy>p,.abSectionHead>p,.abSecurityGrid>div:first-child>p:last-child,.abExpertiseInner>div:first-child>p:last-child,.abContactInner p:last-child,.abProcurementGrid>div>p{color:#6f8999}
.abDevices{background:linear-gradient(180deg,#f9fdff,#eef9fd)}
.abDeviceCard{overflow:hidden;border-radius:30px;background:rgba(255,255,255,.88);border:1px solid rgba(66,160,201,.14);box-shadow:0 18px 48px rgba(42,115,150,.08);backdrop-filter:blur(12px)}
.abMac{min-height:700px}
.abIpad,.abIphone{min-height:350px}
.abDeviceCopy{padding:30px}
.abDeviceCopy h3{font-size:clamp(27px,2.5vw,40px);line-height:1.04;font-weight:800;margin:10px 0 14px;color:#163d56}
.abPills b{padding:7px 10px;border-radius:999px;background:#eef9fd;color:#4c788e;font-size:10px;border:1px solid rgba(93,179,211,.14)}
.abDeviceImage{min-height:260px;background:#f3f8fb;overflow:hidden}
.abDeviceImage img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease,filter .8s ease}
.abDeviceCard:hover img{transform:scale(1.028)}
.abMac .abDeviceImage img{animation:abMacTilt 11s ease-in-out infinite;transform-origin:center center}
.abIphone .abDeviceImage{background:transparent;display:flex;align-items:center;justify-content:center}
.abIphone .abDeviceImage img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;animation:abFloatSoft 9s ease-in-out infinite;filter:drop-shadow(0 18px 30px rgba(40,87,114,.14))}
.abIphone.abDeviceCard:hover .abDeviceImage img{transform:none}
.abIpad .abDeviceImage img{animation:abIpadFloat 10s ease-in-out infinite;transform-origin:center center}
@keyframes abIpadFloat{0%,100%{transform:scale(1.08) translateY(-7px)}50%{transform:scale(1.08) translateY(7px)}}
.abFlowCard,.abMsCanvas,.abOfferMain,.abOfferSmall,.abOfferWide,.abCertPrep,.abTimeline,.abSecurityGroups article{backdrop-filter:blur(16px)}
.abManager{background:#fff}
.abFlowCard{padding:30px;border-radius:30px;background:linear-gradient(145deg,rgba(243,251,254,.96),rgba(255,255,255,.96));border:1px solid rgba(72,157,199,.16);box-shadow:0 22px 58px rgba(41,112,147,.09)}
.abFlowStep{border-color:#e6f0f5}
.abFlowStep.focus{background:linear-gradient(135deg,#2fb7e0,#5bacf7);border-color:transparent;box-shadow:0 12px 24px rgba(72,172,231,.2)}
.abZeroTouch{background:linear-gradient(180deg,#f7fcff,#ebf8fd);color:#163b52}
.abZeroHead h2{font-size:clamp(38px,4.6vw,62px);letter-spacing:-.05em;margin:0;color:#163c55}
.abZeroHead>p{color:#6d8998;line-height:1.7}
.abTimeline{display:flex;align-items:center;gap:10px;margin-top:40px;padding:22px;border-radius:24px;background:rgba(255,255,255,.72);border:1px solid rgba(88,181,215,.16);box-shadow:0 18px 46px rgba(57,128,162,.08);overflow:auto}
.abTimeline span{white-space:nowrap;padding:11px 13px;border-radius:12px;background:#fff;font-size:12px;font-weight:800;color:#4d7589;border:1px solid rgba(89,182,215,.14)}
.abTimeline span.active{background:linear-gradient(135deg,#42c1e7,#78d7f6);color:#0a3044}
.abTimeline b{color:#56badf}
.abMdm{background:#f5fbfe}
.abMdmVisual{min-height:580px;border-radius:34px;overflow:hidden;box-shadow:0 26px 68px rgba(30,98,132,.14)}
.abMdmVisual:after{background:linear-gradient(180deg,transparent 45%,rgba(8,33,46,.38))}
.abMicrosoft{background:linear-gradient(180deg,#f6fcff,#e8f7fd);color:#153b54}
.abSectionHead.light h2{color:#153b54}
.abSectionHead.light>p{color:#6d8998}
.abMsCanvas{display:grid;grid-template-columns:.75fr 90px 1.25fr;align-items:center;gap:22px;padding:34px;border-radius:30px;background:rgba(255,255,255,.82);border:1px solid rgba(88,181,214,.16);box-shadow:0 20px 52px rgba(44,118,150,.08)}
.abMsDevice{padding:30px;border-radius:24px;background:linear-gradient(145deg,#effbff,#d6f1fd);color:#123a53}
.abMsStack span{padding:15px 17px;border-radius:14px;background:#fff;border:1px solid rgba(89,182,215,.14);color:#265068;font-weight:750}
.abMsStatement{text-align:center;margin:26px 0 0;color:#419fc9;font-size:18px;font-weight:800}
.abSecurity{background:linear-gradient(180deg,#f7fcff,#ecf8fd);color:#153b54}
.abSecurity h2{color:#153b54}
.abSecurityGroups article{padding:24px;border-radius:22px;background:rgba(255,255,255,.82);border:1px solid rgba(88,181,214,.14);box-shadow:0 12px 34px rgba(58,132,166,.08)}
.abSecurityGroups span{color:#39b9e4;font-size:11px;font-weight:900;letter-spacing:.1em}
.abSecurityGroups h3{font-size:25px;margin:8px 0;color:#153b54}
.abSecurityGroups p{margin:0;color:#6e8999;line-height:1.6}
.abSupportImage{height:500px;border-radius:32px;overflow:hidden;background:#eaf7fd;box-shadow:0 22px 54px rgba(51,121,154,.1)}
.abLifecycle{background:#f3fbfe}
.abOfferLayout{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
.abOfferMain,.abOfferSmall,.abOfferWide{border-radius:28px;border:1px solid rgba(88,181,214,.16);background:rgba(250,253,255,.92);box-shadow:0 18px 48px rgba(52,119,151,.07)}
.abOfferMain{grid-row:span 2;padding:34px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(235,248,253,.95));color:#16384f}
.abOfferMain h3{font-size:46px;margin:14px 0 0;color:#16384f}
.abOfferMain small{color:#6d8c9c}
.abOfferMain p{line-height:1.7;color:#6b8797}
.abOfferSmall{padding:30px}
.abOfferSmall h3,.abOfferWide h3{font-size:32px;margin:12px 0 4px;color:#183f57}
.abProcurement{background:linear-gradient(145deg,#f5fbff,#eefaff)}
.abProcurementDevices{height:400px;position:relative;border-radius:34px;background:radial-gradient(circle at 65% 40%,#dcf5fd,#f6fbfd 68%);overflow:hidden;box-shadow:0 24px 54px rgba(46,119,151,.08)}
.abProcurementDevices img:first-child{height:92%;left:7%;bottom:-8%;animation:abFloatSoft 10s ease-in-out infinite}
.abProcurementDevices img:last-child{width:52%;right:2%;bottom:0;border-radius:24px;box-shadow:0 20px 50px rgba(33,85,111,.15);animation:abFloatSoft 12s ease-in-out infinite reverse}
.abExpertise{background:linear-gradient(180deg,#f5fcff,#eaf8fd);color:#153b54}
.abExpertiseInner{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.abExpertise h2{color:#153b54;font-size:clamp(34px,4vw,56px);font-weight:800;max-width:10.5ch}
.abCertPrep{padding:28px;border-radius:24px;background:rgba(255,255,255,.72);border:1px solid rgba(88,181,214,.16);box-shadow:0 20px 52px rgba(44,118,150,.08)}
.abCertPrep span{display:block;color:#39b9e4;font-size:10px;font-weight:900;letter-spacing:.12em;margin-bottom:13px}
.abCertPrep strong{display:block;padding:13px 0;border-bottom:1px solid #dbeef4;font-size:17px;color:#17384f}
.abCertPrep small{display:block;margin-top:14px;color:#7995a5}
.abContact{background:linear-gradient(180deg,#f8fcff,#eef9fd)}
.abLegal{padding:18px 0 30px;background:#f8fcff}
.appleHomeFeature{padding:58px 0;background:linear-gradient(180deg,#f7fcff 0%,#e9f7fd 100%);color:#153b54}
.appleHomeFeatureInner{display:grid;grid-template-columns:.9fr 1.1fr;gap:42px;align-items:center}
.appleHomeCopy h2{font-size:clamp(34px,3.8vw,52px);line-height:1.05;letter-spacing:-.05em;margin:0 0 16px;color:#153b54}
.appleHomeCopy h2 span{color:#49b8e2}
.appleHomeCopy p{color:#6b8797;line-height:1.7;max-width:620px}
.appleHomeCopy .ghost{margin-top:10px;color:#153b54;border-color:rgba(104,194,226,.26);background:rgba(255,255,255,.74)}
.appleHomeVisual{height:320px;border-radius:28px;overflow:hidden;border:1px solid rgba(104,194,226,.2);box-shadow:0 24px 58px rgba(49,121,152,.1)}
.appleHomeVisual img{width:100%;height:100%;object-fit:cover;animation:abSceneFloat 14s ease-in-out infinite alternate}
@keyframes abSceneFloat{0%{transform:scale(1.02) translate3d(-6px,0,0) rotate(-.3deg)}100%{transform:scale(1.06) translate3d(6px,-8px,0) rotate(.3deg)}}
@keyframes abMacTilt{0%,100%{transform:perspective(1100px) rotateY(-5deg) rotateX(1deg) scale(1.02)}50%{transform:perspective(1100px) rotateY(4deg) rotateX(-1deg) scale(1.05)}}
@keyframes abFloatSoft{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:1040px){
.appleBusinessMain .section{padding:78px 0}
.abHero{padding:64px 0 52px}
.abHeroCopy h1{font-size:clamp(42px,7vw,64px)}
.abHeroVisual{min-height:390px}
.abMac{min-height:0}
.abDeviceCard,.abOfferMain,.abOfferSmall,.abOfferWide,.abFlowCard,.abMsCanvas,.abCertPrep{box-shadow:0 14px 36px rgba(49,120,153,.08)}
}
@media(max-width:760px){
.appleBusinessMain .section{padding:68px 0}
.abHero{padding:52px 0 44px}
.abHeroCopy h1{font-size:42px;line-height:1}
.abHeroVisual{min-height:330px}
.abHeroGlass{left:16px;right:16px;bottom:16px}
.abStatement h2,.abSectionHead h2,.abCopy h2,.abSecurity h2,.abExpertise h2,.abContact h2,.abProcurement h2,.abMdmCopy h2,.abZeroHead h2{font-size:36px}
.appleHomeVisual{height:250px}
}
/* --- V35 Apple motion and lifecycle refinement --- */
.abHeroVisual{position:relative;perspective:1800px;isolation:isolate}
.abHeroCarousel{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d;padding:34px}
.abHeroSlide{position:absolute;width:64%;height:78%;border-radius:28px;overflow:hidden;border:1px solid rgba(113,198,225,.24);box-shadow:0 26px 60px rgba(28,93,125,.16);background:rgba(255,255,255,.82);backdrop-filter:blur(16px);animation:abHeroDeck 28s ease-in-out infinite}
.abHeroSlide img{width:100%;height:100%;object-fit:cover;display:block}
.abHeroSlide:nth-child(1){animation-delay:0s}
.abHeroSlide:nth-child(2){animation-delay:-5.6s}
.abHeroSlide:nth-child(3){animation-delay:-11.2s}
.abHeroSlide:nth-child(4){animation-delay:-16.8s}
.abHeroSlide:nth-child(5){animation-delay:-22.4s}
.abHeroSlide:nth-child(1) img{object-position:center center}
.abHeroSlide:nth-child(2) img{object-position:center top}
.abHeroSlide:nth-child(3) img{object-position:center center}
.abHeroSlide:nth-child(4) img{object-position:center center}
.abHeroSlide:nth-child(5) img{object-position:center center}
.abHeroVisual:before{content:"";position:absolute;inset:18px;border-radius:28px;border:1px solid rgba(255,255,255,.42);background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0));z-index:0;pointer-events:none}
.abHeroGlass{z-index:3}
.abSupportImage img{object-position:center 18%}
.abLifecycle{background:linear-gradient(180deg,#f3fbfe,#e8f7fc)}
.abLifecycleFlow{position:relative;overflow:hidden;padding:28px 4px 12px;mask-image:linear-gradient(90deg,transparent 0,black 3%,black 97%,transparent 100%)}
.abLifecycleFlow::-webkit-scrollbar{display:none}
.abLifecycleFlow:before{content:"";position:absolute;left:40px;right:40px;top:42px;height:3px;border-radius:999px;background:linear-gradient(90deg,rgba(79,182,217,.2),rgba(65,188,225,.8),rgba(79,182,217,.2));background-size:180% 100%;animation:abLineFlow 10s linear infinite;z-index:0}
.abLifecycleMarquee{position:relative;z-index:1;display:flex;align-items:stretch;gap:18px;width:max-content;will-change:transform}
.abLifecycleMarquee.is-ready{animation:abLifeMarquee var(--life-duration,44s) linear infinite}
.abLifecycleTrack{display:flex;align-items:stretch;gap:18px;flex:0 0 auto;min-width:max-content}
.abLifeItem{position:relative;flex:0 0 228px;padding:28px 18px 18px;border-radius:24px;background:rgba(255,255,255,.78);border:1px solid rgba(95,181,212,.18);backdrop-filter:blur(14px);box-shadow:0 16px 38px rgba(53,123,154,.08)}
.abLifeItem:before{content:"";position:absolute;left:18px;top:10px;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#34bbe6,#84dff7);box-shadow:0 0 0 5px rgba(75,189,225,.12)}
.abLifeItem:after{content:"";position:absolute;top:16px;left:34px;width:calc(100% + 18px);height:2px;background:rgba(111,199,228,.45)}
.abLifecycleTrack .abLifeItem:last-child:after{display:none}
.abLifecycleFlow:hover .abLifecycleMarquee{animation-play-state:paused}
.abLifeItem small{display:block;color:#39b8e2;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.abLifeItem strong{display:block;color:#163c55;font-size:18px;line-height:1.15;margin-bottom:8px}
.abLifeItem p{margin:0;color:#6f8998;line-height:1.5;font-size:14px}
@keyframes abHeroDeck{
0%,16%{transform:translate3d(30%,0,-120px) rotateY(-42deg) rotateX(1deg) scale(.9);opacity:.36;z-index:1}
20%,36%{transform:translate3d(14%,0,-40px) rotateY(-20deg) rotateX(.5deg) scale(.95);opacity:.62;z-index:2}
40%,56%{transform:translate3d(0,0,120px) rotateY(0deg) rotateX(0deg) scale(1);opacity:1;z-index:4}
60%,76%{transform:translate3d(-14%,0,-40px) rotateY(20deg) rotateX(.5deg) scale(.95);opacity:.62;z-index:3}
80%,96%{transform:translate3d(-30%,0,-120px) rotateY(42deg) rotateX(1deg) scale(.9);opacity:.36;z-index:1}
100%{transform:translate3d(-38%,0,-160px) rotateY(50deg) rotateX(1deg) scale(.86);opacity:0}
}
@keyframes abLineFlow{0%{background-position:0% 0}100%{background-position:180% 0}}
@keyframes abLifeMarquee{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--life-shift, 0px)))}}
@media(max-width:1100px){
.abHeroCarousel{padding:26px}
.abHeroSlide{width:72%;height:74%}
.abLifeItem{flex-basis:210px}
}
@media(max-width:760px){
.abHeroVisual{min-height:360px}
.abHeroCarousel{padding:18px}
.abHeroSlide{width:78%;height:72%;border-radius:22px}
.abLifecycleFlow{padding-top:24px;mask-image:none}
.abLifecycleFlow:before{left:24px;right:24px;top:36px}
.abLifecycleMarquee,.abLifecycleTrack{gap:14px}
.abLifeItem{flex-basis:184px;padding:24px 16px 16px}
.abLifeItem strong{font-size:16px}
.abLifeItem p{font-size:13px}
}
/* --- V36 Apple HD cube hero --- */
.abHeroCarousel,.abHeroSlide{display:none !important}
.abHeroVisual{overflow:hidden;perspective:2200px;perspective-origin:50% 42%}
.abHeroCubeStage{position:absolute;inset:18px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.abHeroCube{--cube-w:min(92%,760px);--cube-h:min(72%,420px);--cube-z:290px;position:relative;width:var(--cube-w);height:var(--cube-h);transform-style:preserve-3d;transform:rotateX(-5deg) rotateY(0deg);animation:abCubeSpin 24s cubic-bezier(.65,.02,.2,1) infinite;will-change:transform}
.abHeroCube::after{content:"";position:absolute;left:8%;right:8%;bottom:-42px;height:56px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(32,92,120,.22),rgba(32,92,120,0));filter:blur(10px);transform:translateZ(-120px)}
.abHeroCubeFace{position:absolute;inset:0;overflow:hidden;border-radius:34px;background:#fff;border:1px solid rgba(123,199,224,.35);backface-visibility:hidden;box-shadow:0 30px 72px rgba(22,73,98,.16)}
.abHeroCubeFace img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:auto}
.abHeroCubeFace.face-1{transform:rotateY(0deg) translateZ(var(--cube-z))}
.abHeroCubeFace.face-2{transform:rotateY(90deg) translateZ(var(--cube-z))}
.abHeroCubeFace.face-3{transform:rotateY(180deg) translateZ(var(--cube-z))}
.abHeroCubeFace.face-4{transform:rotateY(270deg) translateZ(var(--cube-z))}
.abHeroCubeFace.face-1 img{object-position:center center}
.abHeroCubeFace.face-2 img{object-position:center center}
.abHeroCubeFace.face-3 img{object-position:center center}
.abHeroCubeFace.face-4 img{object-position:center center}
@keyframes abCubeSpin{
0%,18%{transform:rotateX(-5deg) rotateY(0deg)}
24%,42%{transform:rotateX(-5deg) rotateY(-90deg)}
48%,66%{transform:rotateX(-5deg) rotateY(-180deg)}
72%,90%{transform:rotateX(-5deg) rotateY(-270deg)}
100%{transform:rotateX(-5deg) rotateY(-360deg)}
}
@media(max-width:1100px){
.abHeroCube{--cube-w:min(94%,640px);--cube-h:min(70%,360px);--cube-z:240px}
}
@media(max-width:760px){
.abHeroCubeStage{inset:14px}
.abHeroCube{--cube-w:min(96%,420px);--cube-h:min(68%,250px);--cube-z:150px}
.abHeroCubeFace{border-radius:24px}
}
/* =========================
V37 – reliable Apple cube on home + Apple page
========================= */
/* Disable the old keyframe so JS owns the transform and cannot fight CSS. */
.abHeroCube{animation:none!important;transition:transform 1.15s cubic-bezier(.22,.72,.18,1)!important}
.appleCubeVisual{position:relative;overflow:hidden;perspective:1800px;perspective-origin:50% 46%;background:linear-gradient(145deg,#f4fbff,#dff3fb)!important;border:1px solid rgba(94,188,221,.22)!important;box-shadow:0 24px 58px rgba(49,121,152,.10)!important}
.appleHomeCubeStage{position:absolute;inset:12px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.appleHomeCube{--home-cube-z:245px;position:relative;width:min(88%,620px);height:82%;transform-style:preserve-3d;transform:rotateX(-3deg) rotateY(0deg);transition:transform 1.15s cubic-bezier(.22,.72,.18,1);will-change:transform}
.appleHomeCubeFace{position:absolute;inset:0;margin:0;overflow:hidden;border-radius:24px;background:#fff;border:1px solid rgba(105,194,225,.30);backface-visibility:hidden;box-shadow:0 20px 48px rgba(24,82,110,.14)}
.appleHomeCubeFace img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:auto}
.appleHomeCubeFace.face-1{transform:rotateY(0deg) translateZ(var(--home-cube-z))}
.appleHomeCubeFace.face-2{transform:rotateY(90deg) translateZ(var(--home-cube-z))}
.appleHomeCubeFace.face-3{transform:rotateY(180deg) translateZ(var(--home-cube-z))}
.appleHomeCubeFace.face-4{transform:rotateY(270deg) translateZ(var(--home-cube-z))}
@media(max-width:1100px){
.appleHomeCube{--home-cube-z:200px;width:min(90%,520px);height:78%}
}
@media(max-width:760px){
.appleHomeCube{--home-cube-z:125px;width:min(92%,340px);height:72%}
.appleHomeCubeFace{border-radius:18px}
}
/* V38 – Apple visuals refined: fuller images, slimmer frames, separate home/apple image sets */
.appleHomeCubeStage{inset:4px!important}
.appleHomeCube{width:min(96%,700px)!important;height:94%!important;--home-cube-z:280px!important}
.appleHomeCubeFace{border-radius:18px!important;border:1px solid rgba(104,194,226,.18)!important;box-shadow:0 14px 34px rgba(24,82,110,.10)!important}
.appleHomeCubeFace img{object-fit:cover!important;object-position:center center!important}
.appleHomeVisual{height:336px!important;border-radius:24px!important}
.appleHomeVisual.appleCubeVisual{background:linear-gradient(145deg,#f8fdff,#e7f6fc)!important}
.abHeroCubeStage{inset:8px!important}
.abHeroCube{--cube-w:min(97%,820px)!important;--cube-h:min(84%,455px)!important;--cube-z:310px!important}
.abHeroCubeFace{border-radius:22px!important;border:1px solid rgba(123,199,224,.24)!important;box-shadow:0 18px 46px rgba(22,73,98,.12)!important}
.abHeroCubeFace img{object-fit:cover!important;object-position:center center!important}
.abHeroVisual{border-radius:28px!important;overflow:hidden!important}
@media(max-width:1100px){
.appleHomeCube{width:min(96%,560px)!important;--home-cube-z:220px!important}
.abHeroCube{--cube-w:min(97%,680px)!important;--cube-h:min(80%,380px)!important;--cube-z:245px!important}
}
@media(max-width:760px){
.appleHomeVisual{height:260px!important}
.appleHomeCubeStage{inset:4px!important}
.appleHomeCube{width:min(96%,360px)!important;height:90%!important;--home-cube-z:130px!important}
.appleHomeCubeFace{border-radius:16px!important}
.abHeroCubeStage{inset:8px!important}
.abHeroCube{--cube-w:min(98%,430px)!important;--cube-h:min(76%,265px)!important;--cube-z:155px!important}
.abHeroCubeFace{border-radius:18px!important}
}
/* =========================
V39 – Apple cubes separated and precisely positioned
========================= */
/* Home page cube: smaller and perfectly centered inside its own visual only. */
.appleHomeVisual.appleCubeVisual{
display:grid!important;
place-items:center!important;
height:320px!important;
padding:0!important;
}
.appleHomeCubeStage{
position:absolute!important;
inset:0!important;
display:grid!important;
place-items:center!important;
transform:none!important;
}
.appleHomeCube{
width:min(78%,560px)!important;
height:74%!important;
--home-cube-z:205px!important;
margin:0 auto!important;
}
.appleHomeCubeFace{
border-radius:20px!important;
border:1px solid rgba(104,194,226,.18)!important;
box-shadow:0 14px 34px rgba(24,82,110,.10)!important;
}
.appleHomeCubeFace img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
}
/* Apple Business cube: independent sizing, centered and lifted slightly upward. */
.abHeroVisual{
display:grid!important;
place-items:center!important;
}
.abHeroCubeStage{
position:absolute!important;
inset:0!important;
display:grid!important;
place-items:center!important;
transform:translateY(-18px)!important;
}
.abHeroCube{
--cube-w:min(88%,720px)!important;
--cube-h:min(76%,400px)!important;
--cube-z:270px!important;
margin:0 auto!important;
}
.abHeroCubeFace{
border-radius:22px!important;
border:1px solid rgba(123,199,224,.22)!important;
box-shadow:0 18px 46px rgba(22,73,98,.11)!important;
}
.abHeroCubeFace img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
}
@media(max-width:1100px){
.appleHomeCube{width:min(80%,500px)!important;height:72%!important;--home-cube-z:180px!important}
.abHeroCubeStage{transform:translateY(-12px)!important}
.abHeroCube{--cube-w:min(90%,620px)!important;--cube-h:min(74%,350px)!important;--cube-z:220px!important}
}
@media(max-width:760px){
.appleHomeVisual.appleCubeVisual{height:250px!important}
.appleHomeCube{width:min(84%,340px)!important;height:68%!important;--home-cube-z:125px!important}
.abHeroCubeStage{transform:translateY(-8px)!important}
.abHeroCube{--cube-w:min(92%,400px)!important;--cube-h:min(70%,240px)!important;--cube-z:145px!important}
}
/* =========================
V40 – reliable Apple single-image cube/flip
========================= */
/* Old four-face cube geometry is retired; these cards keep one full image visible. */
.appleHomeCube,.appleHomeCubeFace,.abHeroCube,.abHeroCubeFace{display:none!important}
.appleHomeCubeStage,.abHeroCubeStage{perspective:1500px!important}
.appleFlipCard{
position:relative;
width:min(76%,540px);
height:72%;
margin:auto;
overflow:hidden;
border-radius:20px;
background:#eef9fd;
border:1px solid rgba(104,194,226,.18);
box-shadow:0 16px 38px rgba(24,82,110,.11);
transform:rotateY(0deg) translateZ(0);
transform-origin:center center;
transform-style:preserve-3d;
transition:transform .56s cubic-bezier(.55,.04,.28,.96),opacity .3s ease;
will-change:transform;
}
.appleFlipImage{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important;object-position:center center!important;animation:none!important}
.appleFlipCard.flipOut{transform:rotateY(-89deg) scale(.97)}
.appleFlipCard.flipIn{transition:none!important;transform:rotateY(89deg) scale(.97)}
.appleFlipCardBusiness{width:min(86%,700px);height:76%;border-radius:22px}
.abHeroCubeStage{transform:translateY(-18px)!important}
@media(max-width:1100px){
.appleFlipCard{width:min(78%,480px);height:70%}
.appleFlipCardBusiness{width:min(88%,610px);height:74%}
.abHeroCubeStage{transform:translateY(-12px)!important}
}
@media(max-width:760px){
.appleFlipCard{width:min(84%,330px);height:66%;border-radius:16px}
.appleFlipCardBusiness{width:min(90%,390px);height:70%;border-radius:18px}
.abHeroCubeStage{transform:translateY(-8px)!important}
}
/* =========================
V41 – true four-sided 3D Apple cube
The next face is physically visible during every rotation.
========================= */
.appleFlipCard,.appleFlipImage,.appleFlipSources{display:none!important}
.appleHomeCube,.abHeroCube{display:block!important;position:relative!important;transform-style:preserve-3d!important;will-change:transform;transition:transform 1.15s cubic-bezier(.22,.72,.18,1)!important;animation:none!important}
.appleHomeCubeFace,.abHeroCubeFace{display:block!important;position:absolute!important;inset:0!important;margin:0!important;overflow:hidden!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;background:#eef9fd!important}
.appleHomeCubeFace img,.abHeroCubeFace img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important;object-position:center!important;animation:none!important}
/* Depth is calculated from the *real rendered width* by JS. */
.appleTrueCube{--apple-cube-depth:240px}
.appleHomeCubeFace.face-1,.abHeroCubeFace.face-1{transform:rotateY(0deg) translateZ(var(--apple-cube-depth))!important}
.appleHomeCubeFace.face-2,.abHeroCubeFace.face-2{transform:rotateY(90deg) translateZ(var(--apple-cube-depth))!important}
.appleHomeCubeFace.face-3,.abHeroCubeFace.face-3{transform:rotateY(180deg) translateZ(var(--apple-cube-depth))!important}
.appleHomeCubeFace.face-4,.abHeroCubeFace.face-4{transform:rotateY(270deg) translateZ(var(--apple-cube-depth))!important}
/* Home: smaller and centered, as requested. */
.appleHomeCubeStage{perspective:1800px!important;perspective-origin:50% 50%!important;overflow:visible!important}
.appleHomeCube.appleTrueCube{width:min(76%,540px)!important;height:72%!important;margin:auto!important;transform:rotateX(-2deg) rotateY(0deg)}
/* Apple page: separate cube, centered and slightly higher. */
.abHeroCubeStage{perspective:2100px!important;perspective-origin:50% 46%!important;overflow:visible!important;transform:translateY(-18px)!important}
.abHeroCube.appleTrueCube{width:min(86%,700px)!important;height:76%!important;margin:auto!important;transform:rotateX(-3deg) rotateY(0deg)}
@media(max-width:1100px){
.appleHomeCube.appleTrueCube{width:min(78%,480px)!important;height:70%!important}
.abHeroCube.appleTrueCube{width:min(88%,610px)!important;height:74%!important}
.abHeroCubeStage{transform:translateY(-12px)!important}
}
@media(max-width:760px){
.appleHomeCube.appleTrueCube{width:min(84%,330px)!important;height:66%!important}
.abHeroCube.appleTrueCube{width:min(90%,390px)!important;height:70%!important}
.abHeroCubeStage{transform:translateY(-8px)!important}
}
/* =========================
V42 – Apple hero cleanup only
Compact, ordered layout at 100% browser zoom.
Cube geometry/rotation is intentionally untouched.
========================= */
@media (min-width:1041px){
.appleBusinessMain .abHero{
padding:58px 0 64px!important;
min-height:auto!important;
}
.appleBusinessMain .abHeroGrid{
grid-template-columns:.92fr 1.08fr!important;
gap:46px!important;
align-items:center!important;
}
.appleBusinessMain .abHeroCopy{
max-width:590px!important;
align-self:center!important;
}
.appleBusinessMain .abHeroCopy h1{
font-size:clamp(48px,4.7vw,70px)!important;
line-height:.98!important;
letter-spacing:-.052em!important;
max-width:590px!important;
margin:0 0 20px!important;
}
.appleBusinessMain .abLead{
max-width:570px!important;
font-size:16.5px!important;
line-height:1.62!important;
}
.appleBusinessMain .abHeroActions{
margin-top:22px!important;
gap:10px!important;
}
.appleBusinessMain .abHeroActions .abPrimary,
.appleBusinessMain .abHeroActions .abSecondary{
min-height:44px!important;
padding:0 17px!important;
border-radius:14px!important;
font-size:14px!important;
}
.appleBusinessMain .abTrust{
max-width:540px!important;
margin-top:16px!important;
font-size:10.5px!important;
line-height:1.45!important;
}
.appleBusinessMain .abHeroVisual{
width:100%!important;
max-width:690px!important;
min-height:430px!important;
height:430px!important;
justify-self:end!important;
border-radius:26px!important;
}
.appleBusinessMain .abHeroGlass{
left:18px!important;
bottom:18px!important;
padding:14px 16px!important;
border-radius:17px!important;
max-width:78%!important;
}
.appleBusinessMain .abHeroGlass strong{
font-size:15px!important;
line-height:1.3!important;
}
.appleBusinessMain .abHeroGlass span{
font-size:9.5px!important;
}
}
@media (min-width:1041px) and (max-width:1280px){
.appleBusinessMain .abHeroGrid{
grid-template-columns:.96fr 1.04fr!important;
gap:34px!important;
}
.appleBusinessMain .abHeroCopy h1{
font-size:clamp(44px,4.5vw,62px)!important;
}
.appleBusinessMain .abHeroVisual{
max-width:620px!important;
min-height:400px!important;
height:400px!important;
}
}
@media (max-width:1040px){
.appleBusinessMain .abHero{
padding:52px 0 58px!important;
}
.appleBusinessMain .abHeroGrid{
gap:34px!important;
}
.appleBusinessMain .abHeroCopy{
max-width:680px!important;
}
.appleBusinessMain .abHeroCopy h1{
font-size:clamp(42px,7vw,60px)!important;
line-height:1!important;
margin-bottom:18px!important;
}
.appleBusinessMain .abLead{
font-size:16px!important;
}
.appleBusinessMain .abHeroVisual{
min-height:390px!important;
height:390px!important;
}
}
@media (max-width:760px){
.appleBusinessMain .abHero{
padding:42px 0 48px!important;
}
.appleBusinessMain .abHeroCopy h1{
font-size:40px!important;
line-height:1.01!important;
}
.appleBusinessMain .abLead{
font-size:15px!important;
line-height:1.58!important;
}
.appleBusinessMain .abHeroVisual{
min-height:320px!important;
height:320px!important;
}
.appleBusinessMain .abHeroGlass{
left:14px!important;
right:14px!important;
bottom:14px!important;
max-width:none!important;
}
}
/* =========================
V43 – corrected true square Apple cube geometry
The rotating object itself is square, so all four physical faces
remain visible and geometrically correct at every 90° turn.
========================= */
.appleHomeCubeStage,
.abHeroCubeStage{
display:flex!important;
align-items:center!important;
justify-content:center!important;
overflow:visible!important;
}
/* Home: smaller, truly centered square cube */
.appleHomeVisual.appleCubeVisual{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.appleHomeCubeStage{
position:absolute!important;
inset:0!important;
perspective:1500px!important;
perspective-origin:50% 50%!important;
}
.appleHomeCube.appleTrueCube{
width:250px!important;
height:250px!important;
min-width:250px!important;
min-height:250px!important;
max-width:250px!important;
max-height:250px!important;
margin:0!important;
transform-style:preserve-3d!important;
transform:rotateX(-2deg) rotateY(0deg);
}
.appleHomeCubeFace{
width:250px!important;
height:250px!important;
border-radius:20px!important;
}
/* Apple Business page: independent, slightly larger square cube */
.abHeroVisual{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.abHeroCubeStage{
position:absolute!important;
inset:0!important;
transform:translateY(-10px)!important;
perspective:1800px!important;
perspective-origin:50% 50%!important;
}
.abHeroCube.appleTrueCube{
width:330px!important;
height:330px!important;
min-width:330px!important;
min-height:330px!important;
max-width:330px!important;
max-height:330px!important;
margin:0!important;
transform-style:preserve-3d!important;
transform:rotateX(-3deg) rotateY(0deg);
}
.abHeroCubeFace{
width:330px!important;
height:330px!important;
border-radius:24px!important;
}
.appleHomeCubeFace img,
.abHeroCubeFace img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
}
@media(max-width:1100px){
.appleHomeCube.appleTrueCube,
.appleHomeCubeFace{
width:220px!important;height:220px!important;
min-width:220px!important;min-height:220px!important;
max-width:220px!important;max-height:220px!important;
}
.abHeroCube.appleTrueCube,
.abHeroCubeFace{
width:290px!important;height:290px!important;
min-width:290px!important;min-height:290px!important;
max-width:290px!important;max-height:290px!important;
}
}
@media(max-width:760px){
.appleHomeCube.appleTrueCube,
.appleHomeCubeFace{
width:180px!important;height:180px!important;
min-width:180px!important;min-height:180px!important;
max-width:180px!important;max-height:180px!important;
border-radius:16px!important;
}
.abHeroCube.appleTrueCube,
.abHeroCubeFace{
width:230px!important;height:230px!important;
min-width:230px!important;min-height:230px!important;
max-width:230px!important;max-height:230px!important;
border-radius:18px!important;
}
.abHeroCubeStage{transform:translateY(-4px)!important}
}
/* V43 safety: contain the 3D scene so it can never create horizontal page scrolling. */
.appleHomeFeature{overflow:hidden!important}
.appleBusinessMain .abHero{overflow:hidden!important}
.appleHomeVisual.appleCubeVisual,.appleBusinessMain .abHeroVisual{overflow:hidden!important}
.appleHomeCube.appleTrueCube{--apple-cube-depth:125px}
.abHeroCube.appleTrueCube{--apple-cube-depth:165px}
/* =========================
V44 – Apple page shine, color motion and richer glass styling
========================= */
.appleBusinessPage .abHero{
background:
radial-gradient(circle at 18% 18%, rgba(146,111,255,.16), transparent 28%),
radial-gradient(circle at 83% 24%, rgba(88,214,255,.22), transparent 30%),
linear-gradient(180deg,#f6fcff 0%,#edf9fe 100%)!important;
color:#143a53!important;
}
.appleBusinessPage .abHeroCopy h1{color:#143b54!important}
.appleBusinessPage .abHeroCopy h1 span{
background:linear-gradient(135deg,#51c7f0 0%,#7a6bff 52%,#49d7d0 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.appleBusinessPage .abLead{color:#6b8798!important}
.appleBusinessPage .abHero .abSecondary{background:rgba(255,255,255,.82)!important;color:#143b54!important;border-color:rgba(90,176,211,.22)!important}
.appleBusinessPage .abTrust{color:#8aa3af!important}
.appleBusinessPage .abHeroVisual{
background:linear-gradient(145deg,rgba(255,255,255,.65),rgba(233,248,255,.88))!important;
border:1px solid rgba(104,191,223,.28)!important;
box-shadow:0 35px 90px rgba(53,126,162,.16)!important;
}
.appleBusinessPage .abHeroVisual:before{
content:"";position:absolute;inset:10px;border-radius:30px;
background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.18));
border:1px solid rgba(255,255,255,.42);z-index:0;
}
.appleBusinessPage .abHeroVisual:after{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(75,183,221,.12))!important}
.appleBusinessPage .abHeroGlass{
background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(235,248,255,.84))!important;
border:1px solid rgba(88,179,214,.22)!important;
box-shadow:0 18px 38px rgba(55,132,167,.14)!important;
}
.appleBusinessPage .abHeroGlass strong{color:#143b54!important}
.appleBusinessPage .abDeviceCard{
position:relative;isolation:isolate;
background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(241,251,255,.92))!important;
overflow:hidden;
}
.appleBusinessPage .abDeviceCard:before{
content:"";position:absolute;inset:auto auto -65px -20px;width:220px;height:220px;border-radius:50%;
background:radial-gradient(circle,rgba(97,205,240,.28),transparent 68%);filter:blur(10px);z-index:0;
}
.appleBusinessPage .abDeviceCard:after{
content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;border-radius:50%;
background:radial-gradient(circle,rgba(131,108,255,.18),transparent 65%);filter:blur(8px);z-index:0;
}
.appleBusinessPage .abDeviceCopy,.appleBusinessPage .abDeviceImage{position:relative;z-index:1}
.appleBusinessPage .abDeviceCopy{
background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.10));
backdrop-filter:blur(10px);
}
.appleBusinessPage .abPills b{
background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(231,247,255,.95));
border:1px solid rgba(99,188,219,.18);
box-shadow:0 8px 20px rgba(61,133,167,.06);
}
.appleBusinessPage .abMac .abDeviceCopy,
.appleBusinessPage .abIpad .abDeviceCopy,
.appleBusinessPage .abIphone .abDeviceCopy{position:relative}
.appleBusinessPage .abMac .abDeviceCopy:before,
.appleBusinessPage .abIpad .abDeviceCopy:before{
content:"";position:absolute;inset:0;opacity:.08;z-index:-1;background-size:cover;background-position:center;
}
.appleBusinessPage .abMac .abDeviceCopy:before{background-image:url('./apple/mac-business-scene.jpg')}
.appleBusinessPage .abIpad .abDeviceCopy:before{background-image:url('./apple/ipad-business-scene.jpg')}
.appleBusinessPage .abIpad .abDeviceCopy h3,
.appleBusinessPage .abIphone .abDeviceCopy h3{font-size:clamp(24px,2.1vw,32px);overflow-wrap:break-word;hyphens:auto}
.appleBusinessPage .abZeroTouch{
background:linear-gradient(180deg,#f8fdff 0%,#edf9fe 100%)!important;
color:#163b53!important;
}
.appleBusinessPage .abTimeline{
position:relative;gap:16px;padding:28px 28px;border-radius:28px;
background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(234,248,255,.94))!important;
border:1px solid rgba(95,184,220,.2)!important;
box-shadow:0 26px 64px rgba(54,126,160,.09);
backdrop-filter:blur(16px);
}
.appleBusinessPage .abTimeline:before{
content:"";position:absolute;left:36px;right:36px;top:50%;height:6px;border-radius:999px;
background:linear-gradient(90deg,#7c6cff,#57c9ff,#55ddb8,#ffb45d,#7c6cff);
background-size:240% 100%;opacity:.38;transform:translateY(-50%);
animation:abFlowMove 9s linear infinite;
}
.appleBusinessPage .abTimeline:after{
content:"";position:absolute;top:calc(50% - 8px);left:38px;width:18px;height:18px;border-radius:50%;
background:linear-gradient(135deg,#7b67ff,#47d7ff);box-shadow:0 0 0 7px rgba(87,201,255,.12),0 0 26px rgba(79,169,255,.35);
animation:abFlowDot 8.5s ease-in-out infinite;
}
.appleBusinessPage .abTimeline b{display:none!important}
.appleBusinessPage .abTimeline span{
position:relative;z-index:1;
background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(240,250,255,.94))!important;
color:#355c71!important;border:1px solid rgba(99,188,220,.16);box-shadow:0 12px 28px rgba(69,135,166,.08);
}
.appleBusinessPage .abTimeline span:nth-of-type(3n+1){background:linear-gradient(135deg,rgba(124,108,255,.10),rgba(255,255,255,.95))!important}
.appleBusinessPage .abTimeline span:nth-of-type(3n+2){background:linear-gradient(135deg,rgba(85,221,184,.12),rgba(255,255,255,.95))!important}
.appleBusinessPage .abTimeline span:nth-of-type(3n){background:linear-gradient(135deg,rgba(255,180,93,.14),rgba(255,255,255,.95))!important}
.appleBusinessPage .abTimeline span.active{
background:linear-gradient(135deg,#5acbf1,#7a6cff)!important;color:#fff!important;border-color:transparent!important;
}
.appleBusinessPage .abMdmVisual{
background:linear-gradient(145deg,#dff5fd,#f7fdff);border:1px solid rgba(92,182,218,.14)
}
.appleBusinessPage .abMdmVisual:before{
content:"";position:absolute;inset:16px;border-radius:28px;z-index:1;
background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.0));pointer-events:none;
}
.appleBusinessPage .abMdmOverlay{padding:18px 22px;border-radius:20px;background:rgba(6,30,43,.54);backdrop-filter:blur(16px);box-shadow:0 15px 34px rgba(16,53,72,.18)}
.appleBusinessPage .abFeatureColumns{grid-template-columns:repeat(3,1fr)}
.appleBusinessPage .abFeatureColumns>div{
position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(238,249,255,.88));
box-shadow:0 18px 44px rgba(53,124,160,.10);backdrop-filter:blur(16px);
animation:abFloatCard 6.5s ease-in-out infinite;
}
.appleBusinessPage .abFeatureColumns>div:nth-child(2){animation-delay:1.2s}
.appleBusinessPage .abFeatureColumns>div:nth-child(3){animation-delay:2.4s}
.appleBusinessPage .abFeatureColumns>div:before{
content:"";position:absolute;left:18px;top:16px;width:42px;height:42px;border-radius:14px;
background:linear-gradient(135deg,rgba(122,108,255,.12),rgba(86,201,255,.18));border:1px solid rgba(98,185,220,.16)
}
.appleBusinessPage .featureDeploy:after,.appleBusinessPage .featureManage:after,.appleBusinessPage .featureProtect:after{
content:"";position:absolute;right:-24px;bottom:-24px;width:120px;height:120px;border-radius:50%;opacity:.18;filter:blur(4px)
}
.appleBusinessPage .featureDeploy:after{background:radial-gradient(circle,#7b69ff 0%,transparent 68%)}
.appleBusinessPage .featureManage:after{background:radial-gradient(circle,#5acbf1 0%,transparent 68%)}
.appleBusinessPage .featureProtect:after{background:radial-gradient(circle,#55d7b5 0%,transparent 68%)}
.appleBusinessPage .abFeatureColumns h3,.appleBusinessPage .abFeatureColumns p{position:relative;z-index:1}
.appleBusinessPage .abFeatureColumns h3{padding-left:54px}
.appleBusinessPage .abMicrosoft{
background:linear-gradient(145deg,#0e2030,#173b54)!important;
position:relative;overflow:hidden;
}
.appleBusinessPage .abMicrosoft:before{
content:"";position:absolute;inset:auto auto -180px -180px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(96,204,240,.16),transparent 68%);filter:blur(12px)
}
.appleBusinessPage .abMsCanvas{background:rgba(255,255,255,.08)!important;backdrop-filter:blur(16px)}
.appleBusinessPage .abMsStack span{transition:transform .25s,background .25s}
.appleBusinessPage .abMsStack span:hover{transform:translateY(-3px);background:rgba(255,255,255,.12)}
.appleBusinessPage .abSecurity{
background:linear-gradient(180deg,#f7fcff,#edf8fd)!important;color:#153b54!important;
}
.appleBusinessPage .abSecurity h2{color:#153b54!important}
.appleBusinessPage .abSecurityGroups{gap:18px}
.appleBusinessPage .abSecurityCard{
position:relative;overflow:hidden;padding:26px 26px 22px;border-radius:24px;
background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(238,249,255,.86));
border:1px solid rgba(90,181,214,.16);box-shadow:0 18px 46px rgba(54,126,160,.08);
}
.appleBusinessPage .abSecurityCard.device{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(236,245,255,.92))}
.appleBusinessPage .abSecurityCard.identity{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(245,239,255,.92))}
.appleBusinessPage .abSecurityCard.company{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,247,236,.92))}
.appleBusinessPage .abSecurityCard:before{
content:"";position:absolute;right:-35px;top:-35px;width:120px;height:120px;border-radius:50%;opacity:.28;filter:blur(2px)
}
.appleBusinessPage .abSecurityCard.device:before{background:radial-gradient(circle,#5cc9ef 0%,transparent 68%)}
.appleBusinessPage .abSecurityCard.identity:before{background:radial-gradient(circle,#8e73ff 0%,transparent 68%)}
.appleBusinessPage .abSecurityCard.company:before{background:radial-gradient(circle,#ffbf70 0%,transparent 68%)}
.appleBusinessPage .abSecurityHead{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.appleBusinessPage .abSecurityHead img{width:28px;height:28px;object-fit:contain}
.appleBusinessPage .abSecurityHead span{color:#39b9e4!important;margin:0}
.appleBusinessPage .abSecurityCard h3,.appleBusinessPage .abSecurityCard p{position:relative;z-index:1}
.appleBusinessPage .abSecurityMini{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;position:relative;z-index:1}
.appleBusinessPage .abSecurityMini i{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.74);border:1px solid rgba(99,188,219,.14);font-style:normal}
.appleBusinessPage .abSecurityMini img{width:16px;height:16px}
.appleBusinessPage .abSecurityMini small{font-size:11px;font-weight:800;color:#355c71}
.appleBusinessPage .abSupport{background:linear-gradient(180deg,#fff,#f4fbfe)!important}
.appleBusinessPage .abSupportCard{
padding:24px;border-radius:36px;border:2px solid rgba(17,34,49,.86);
background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(237,248,255,.92));
box-shadow:0 24px 60px rgba(61,132,166,.12);
}
.appleBusinessPage .abSupportImage{border-radius:26px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.appleBusinessPage .abSupport .abSecondary{
display:flex;
width:fit-content;
margin:22px 0 0 auto;
padding:0 22px;
min-height:46px;
background:linear-gradient(135deg,#28b9dc,#4f9cf6);
color:#fff;
border:none;
box-shadow:0 16px 34px rgba(40,158,220,.22);
transition:.2s ease;
}
.appleBusinessPage .abSupport .abSecondary:hover{
transform:translateY(-2px);
box-shadow:0 20px 42px rgba(40,158,220,.3);
}
.appleBusinessPage .abSupport .abPills.big b:nth-child(3n+1){background:linear-gradient(135deg,#eef8ff,#ffffff)}
.appleBusinessPage .abSupport .abPills.big b:nth-child(3n+2){background:linear-gradient(135deg,#fff3da,#ffffff)}
.appleBusinessPage .abSupport .abPills.big b:nth-child(3n){background:linear-gradient(135deg,#f0ebff,#ffffff)}
.appleBusinessPage .abLifecycle{background:linear-gradient(180deg,#eff9fd,#f7fcff)!important}
.appleBusinessPage .abLifeItem{
position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(236,248,255,.90));
border:1px solid rgba(93,182,218,.14);box-shadow:0 14px 34px rgba(54,126,160,.06);
}
.appleBusinessPage .abLifeItem:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#64c7ef,#7a6cff)}
.appleBusinessPage .abLifeItem strong{color:#163b54}
@keyframes abFlowMove{0%{background-position:0% 50%}100%{background-position:240% 50%}}
@keyframes abFlowDot{0%{left:38px;opacity:.85}50%{opacity:1}100%{left:calc(100% - 56px);opacity:.85}}
@keyframes abFloatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:1040px){
.appleBusinessPage .abFeatureColumns{grid-template-columns:1fr}
.appleBusinessPage .abTimeline:before,.appleBusinessPage .abTimeline:after{display:none}
}
/* =========================
V45 – refined Apple gradients, fuller flow and lighter Microsoft area
========================= */
.appleBusinessPage .abStatement h2 span{
background:linear-gradient(135deg,#ffb56b 0%,#ff866f 45%,#f25d7d 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.appleBusinessPage .abDevices .abSectionHead h2 span{
background:linear-gradient(135deg,#60cbef 0%,#7c6cff 48%,#52dcc6 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.appleBusinessPage .abMdmCopy h2 span{
background:linear-gradient(135deg,#5dc8ef 0%,#7b69ff 42%,#4fdcc9 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.appleBusinessPage .abMicrosoft .abSectionHead h2,
.appleBusinessPage .abMicrosoft .abSectionHead.light h2{color:#163b53!important}
.appleBusinessPage .abMicrosoft .abSectionHead h2 span,
.appleBusinessPage .abMicrosoft .abSectionHead.light h2 span{
background:linear-gradient(135deg,#4bbfe8 0%,#5b7cff 44%,#7d6cff 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.appleBusinessPage .abZeroHead{align-items:end;gap:36px}
.appleBusinessPage .abZeroHead>p{max-width:520px;color:#6d8798}
.appleBusinessPage .abTimeline{padding:34px 24px 24px}
.appleBusinessPage .abTimeline span{
min-height:56px;display:inline-flex;align-items:center;justify-content:center;text-align:center;
padding:14px 18px!important;border-radius:18px!important;font-weight:800!important;color:#fff!important;
border:none!important;position:relative;overflow:hidden;
box-shadow:0 12px 28px rgba(58,127,160,.14), inset 0 1px 0 rgba(255,255,255,.24);
}
.appleBusinessPage .abTimeline span:before{
content:"";position:absolute;inset:-30% auto -30% -60%;width:48%;transform:skewX(-24deg);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);animation:abCardSweep 6s linear infinite;
}
.appleBusinessPage .abTimeline span:nth-of-type(1){background:linear-gradient(135deg,#ff9e61,#ff6f7f)!important}
.appleBusinessPage .abTimeline span:nth-of-type(2){background:linear-gradient(135deg,#ff8d70,#ea5c8a)!important}
.appleBusinessPage .abTimeline span:nth-of-type(3){background:linear-gradient(135deg,#a978ff,#6f74ff)!important}
.appleBusinessPage .abTimeline span:nth-of-type(4){background:linear-gradient(135deg,#5f9dff,#4dbdf4)!important}
.appleBusinessPage .abTimeline span:nth-of-type(5){background:linear-gradient(135deg,#3788f0,#2962d9)!important}
.appleBusinessPage .abTimeline span:nth-of-type(6){background:linear-gradient(135deg,#44c0f5,#3fdab3)!important}
.appleBusinessPage .abTimeline span:nth-of-type(7){background:linear-gradient(135deg,#35cfb9,#69d38d)!important}
.appleBusinessPage .abTimeline span:nth-of-type(8){background:linear-gradient(135deg,#72cb77,#c2cf57)!important}
.appleBusinessPage .abTimeline span:nth-of-type(9){background:linear-gradient(135deg,#f0c755,#ff9f59)!important}
.appleBusinessPage .abTimeline span.active{background:linear-gradient(135deg,#63c8f0,#7a6cff)!important;color:#fff!important}
.appleBusinessPage .abTimeline:before{height:8px;opacity:.46;top:58%}
.appleBusinessPage .abTimeline:after{
width:22px;height:22px;top:calc(58% - 10px);border-radius:12px;
background:linear-gradient(135deg,#ffffff,#d5f7ff);box-shadow:0 0 0 8px rgba(87,201,255,.12),0 0 28px rgba(79,169,255,.36);
}
.appleBusinessPage .abFeatureColumns>div{padding:24px 22px 20px}
.appleBusinessPage .abFeatureColumns h3{margin-bottom:14px}
.appleBusinessPage .abFeatureColumns p{display:flex;flex-wrap:wrap;gap:10px;line-height:1.35;margin:0}
.appleBusinessPage .abFeatureColumns p span{
display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;border-radius:999px;
background:rgba(255,255,255,.76);border:1px solid rgba(98,186,220,.18);font-weight:700;font-size:13px;color:#3a5d72;
box-shadow:0 8px 18px rgba(60,132,167,.06);
}
.appleBusinessPage .featureDeploy p span:nth-child(1){background:linear-gradient(135deg,#f0ebff,#ffffff)}
.appleBusinessPage .featureManage p span:nth-child(1){background:linear-gradient(135deg,#e9f8ff,#ffffff)}
.appleBusinessPage .featureProtect p span:nth-child(1){background:linear-gradient(135deg,#ecfff8,#ffffff)}
.appleBusinessPage .abDeviceCard h3{
background:linear-gradient(135deg,#163b53 0%,#1b5275 58%,#39bde6 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.appleBusinessPage .abDeviceCopy span{color:#39b9e4!important}
.appleBusinessPage .abMicrosoft{
background:linear-gradient(180deg,#f8fdff 0%,#eef9fe 100%)!important;color:#163b53!important;
}
.appleBusinessPage .abMicrosoft .abSectionHead.light p,
.appleBusinessPage .abMicrosoft .abMsStatement{color:#678394!important}
.appleBusinessPage .abMsCanvas{
background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(238,249,255,.94))!important;
border:1px solid rgba(93,182,218,.18)!important;box-shadow:0 28px 62px rgba(56,127,160,.10)!important;
}
.appleBusinessPage .abMsDevice{
background:linear-gradient(135deg,#163b53,#2f5770)!important;color:#fff!important;box-shadow:0 18px 40px rgba(22,59,83,.14)
}
.appleBusinessPage .abMsLine{background:linear-gradient(180deg,#54c9ef,#7b69ff)!important;box-shadow:0 0 18px rgba(83,190,235,.18)}
.appleBusinessPage .abMsStack{gap:12px}
.appleBusinessPage .abMsStack span{
font-weight:800;border:1px solid transparent!important;box-shadow:0 10px 22px rgba(58,127,160,.08)
}
.appleBusinessPage .abMsStack span:nth-child(1){background:#e6f0ff!important;color:#0f4fb8!important;border-color:#c7dbff!important}
.appleBusinessPage .abMsStack span:nth-child(2){background:#eef5ff!important;color:#2055b5!important;border-color:#d6e4ff!important}
.appleBusinessPage .abMsStack span:nth-child(3){background:#e8f3ff!important;color:#0a67c8!important;border-color:#cde5ff!important}
.appleBusinessPage .abMsStack span:nth-child(4){background:#f1ebff!important;color:#5c2bd6!important;border-color:#e0d2ff!important}
.appleBusinessPage .abMsStack span:nth-child(5){background:#eef8ff!important;color:#136ac6!important;border-color:#d6ecff!important}
.appleBusinessPage .abMsStack span:nth-child(6){background:#ebfaf6!important;color:#0b7d6a!important;border-color:#d0f1e9!important}
.appleBusinessPage .abMsStack span:nth-child(7){background:#fff6e8!important;color:#a15a00!important;border-color:#ffe6bb!important}
.appleBusinessPage .abMsStack span:nth-child(8){background:#eef3ff!important;color:#394fa9!important;border-color:#d3dcff!important}
.appleBusinessPage .abSupport .abSupportGrid h2 span{display:inline}
.appleBusinessPage .abSupportGrid .abCopy h2{
background:linear-gradient(135deg,#163b53 0%,#274e6b 54%,#2ea7da 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
@keyframes abCardSweep{0%{transform:translateX(0) skewX(-24deg)}100%{transform:translateX(340%) skewX(-24deg)}}
/* =========================
V46 – Apple refinement pass
========================= */
.appleBusinessPage .abZeroTouch{background:linear-gradient(180deg,#f7fcfe 0%,#eef9fd 100%)!important;color:#153b55!important}
.appleBusinessPage .abZeroHead h2{color:#153b55!important}
.appleBusinessPage .abZeroHead>p{color:#6f8a9b!important}
.appleBusinessPage .abTimeline{
position:relative;display:flex;align-items:center;justify-content:center;gap:8px;
max-width:1180px;margin:34px auto 0;padding:18px 18px;border-radius:28px;
background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(235,248,253,.9))!important;
border:1px solid rgba(114,196,227,.22)!important;box-shadow:0 22px 54px rgba(59,127,160,.10), inset 0 1px 0 rgba(255,255,255,.78);
overflow:auto;
}
.appleBusinessPage .abTimeline:before{
content:"";position:absolute;left:22px;right:22px;top:50%;height:16px;transform:translateY(-50%);
border-radius:999px;background:linear-gradient(90deg,rgba(255,146,105,.14),rgba(154,121,255,.14),rgba(67,197,243,.14),rgba(107,214,139,.16),rgba(246,204,93,.14));
border:1px solid rgba(150,220,243,.20);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34), inset 0 0 22px rgba(255,255,255,.22);
}
.appleBusinessPage .abTimeline:after{
content:"";position:absolute;left:0;top:0;bottom:0;width:34%;border-radius:28px;
background:linear-gradient(90deg,rgba(255,152,110,.18),rgba(132,115,255,.15),rgba(89,203,246,.15),transparent 88%);
filter:blur(16px);animation:abRibbonTravel 10s ease-in-out infinite alternate;pointer-events:none;
}
.appleBusinessPage .abTimeline span{
position:relative;z-index:1;min-height:48px;padding:10px 14px!important;border-radius:15px!important;
background:rgba(255,255,255,.50)!important;color:#fff!important;font-size:12px!important;font-weight:850!important;
border:1px solid rgba(255,255,255,.30)!important;box-shadow:0 10px 24px rgba(52,124,158,.10), inset 0 0 0 1px rgba(255,255,255,.22);
backdrop-filter:blur(14px);text-align:center;
}
.appleBusinessPage .abTimeline span:after{
content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.18));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
opacity:.75;pointer-events:none;
}
.appleBusinessPage .abTimeline span.active{transform:none!important}
.appleBusinessPage .abTimeline b{display:none!important}
.appleBusinessPage .abFeatureColumns{grid-template-columns:repeat(3,1fr)!important;gap:16px!important}
.appleBusinessPage .abFeatureColumns>div{
position:relative;padding:26px 20px 22px!important;border-radius:24px!important;overflow:hidden;
background:linear-gradient(180deg,#ffffff 0%,#f6fcff 100%)!important;border:1px solid rgba(102,190,222,.18)!important;
box-shadow:0 18px 46px rgba(57,128,162,.08), inset 0 1px 0 rgba(255,255,255,.82);
}
.appleBusinessPage .abFeatureColumns>div:before{
content:"";position:absolute;inset:-20% -10% auto -10%;height:68%;
background:radial-gradient(circle at 50% 0%,rgba(90,194,242,.18),transparent 68%);
pointer-events:none;animation:abSoftGlow 7s ease-in-out infinite;
}
.appleBusinessPage .abFeatureColumns>div:nth-child(2):before{background:radial-gradient(circle at 50% 0%,rgba(128,133,255,.18),transparent 68%);animation-delay:1.8s}
.appleBusinessPage .abFeatureColumns>div:nth-child(3):before{background:radial-gradient(circle at 50% 0%,rgba(104,218,167,.16),transparent 68%);animation-delay:3.2s}
.appleBusinessPage .abFeatureTop{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px;text-align:center}
.appleBusinessPage .abFeatureTop img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(66,150,193,.16))}
.appleBusinessPage .abFeatureColumns h3{padding-left:0!important;margin:0!important;text-align:center}
.appleBusinessPage .abFeatureColumns p{justify-content:center!important;align-items:center!important;text-align:center!important}
.appleBusinessPage .abFeatureColumns p span{justify-content:center;text-align:center}
.appleBusinessPage .abMsCanvas{
padding:34px!important;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(239,250,255,.95))!important;
border:1px solid rgba(99,186,221,.20)!important;box-shadow:0 26px 64px rgba(56,127,160,.10)!important;
}
.appleBusinessPage .abMsDevice{
padding:24px 22px!important;background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(233,247,255,.94))!important;
border:1px solid rgba(113,198,227,.22)!important;box-shadow:0 18px 44px rgba(72,138,169,.10)!important
}
.appleBusinessPage .abMsDevice strong{display:flex!important;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-size:0!important}
.appleBusinessPage .abMsDevice strong span{
display:inline-flex;align-items:center;justify-content:center;min-width:82px;padding:11px 14px;border-radius:999px;
background:linear-gradient(135deg,rgba(77,192,241,.14),rgba(125,108,255,.12));border:1px solid rgba(102,190,222,.20);
color:#1b4a68;font-size:16px;font-weight:850;box-shadow:inset 0 1px 0 rgba(255,255,255,.84),0 10px 24px rgba(67,136,168,.08)
}
.appleBusinessPage .abMsDevice strong i{display:block;width:22px;height:2px;border-radius:999px;background:linear-gradient(90deg,#66c6ec,#7c6cff)}
.appleBusinessPage .abMsDevice small{text-align:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#77a1b5}
.appleBusinessPage .abMicrosoft .abMsStatement{background:linear-gradient(135deg,#4bbfe8 0%,#607eff 54%,#7d6cff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes abRibbonTravel{0%{transform:translateX(0)}100%{transform:translateX(190%)}}
@keyframes abSoftGlow{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:.9;transform:translateY(8px)}}
@media(max-width:1100px){
.appleBusinessPage .abFeatureColumns{grid-template-columns:1fr!important}
.appleBusinessPage .abTimeline{justify-content:flex-start}
.appleBusinessPage .abMsDevice strong{justify-content:flex-start}
}
/* =========================
V47 – Apple page polish
========================= */
body.appleBusinessPage .abManager .abCopy h2 span,
body.appleBusinessPage .abZeroHead h2 span,
body.appleBusinessPage .abSecurity h2 span{
display:inline-block;
background:linear-gradient(90deg,#ffb36b 0%,#ff7a6f 26%,#7c6cff 62%,#4dc9ef 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abSecurity h2 span{
background:linear-gradient(90deg,#ff9b63 0%,#ff7b7b 34%,#b06bff 68%,#58c8ef 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* MDM cards: more uniform and icon-led */
body.appleBusinessPage .abFeatureColumns{grid-template-columns:repeat(3,1fr)!important;gap:18px!important}
body.appleBusinessPage .abFeatureColumns>div{
padding:24px 20px 22px!important;
border-radius:26px!important;
background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,252,255,.98))!important;
border:1px solid rgba(95,186,221,.20)!important;
box-shadow:0 18px 42px rgba(57,128,162,.09), inset 0 1px 0 rgba(255,255,255,.9)!important;
}
body.appleBusinessPage .abFeatureTop{justify-content:flex-start!important;gap:12px!important;margin-bottom:16px!important}
body.appleBusinessPage .abFeatureTop img{width:30px!important;height:30px!important;filter:drop-shadow(0 8px 18px rgba(74,157,194,.18))}
body.appleBusinessPage .abFeatureColumns h3{font-size:18px!important;text-align:left!important}
body.appleBusinessPage .abFeatureColumns p{
display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;
justify-content:stretch!important;align-items:stretch!important;text-align:left!important;
}
body.appleBusinessPage .abFeatureColumns p span{
min-height:86px; padding:12px 10px 10px!important; border-radius:18px!important;
display:flex!important; flex-direction:column; align-items:center; justify-content:center; gap:8px;
text-align:center!important; font-size:13px!important; line-height:1.15; font-weight:800;
color:#214b63!important; background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(240,249,253,.95))!important;
border:1px solid rgba(114,196,227,.18)!important; box-shadow:0 10px 24px rgba(63,131,162,.07), inset 0 1px 0 rgba(255,255,255,.82);
}
body.appleBusinessPage .abFeatureColumns p span:before{
content:""; width:24px; height:24px; flex:0 0 24px; display:block; background-position:center; background-repeat:no-repeat; background-size:contain;
filter:drop-shadow(0 6px 12px rgba(74,157,194,.16)); opacity:.95;
}
body.appleBusinessPage .featureDeploy p span:before{background-image:url('apple/ui/deployment.svg')}
body.appleBusinessPage .featureManage p span:before{background-image:url('apple/ui/management.svg')}
body.appleBusinessPage .featureProtect p span:before{background-image:url('apple/ui/security-card.svg')}
body.appleBusinessPage .featureDeploy p span{background:linear-gradient(180deg,#fff,#fbf6ff)!important}
body.appleBusinessPage .featureManage p span{background:linear-gradient(180deg,#fff,#f3fbff)!important}
body.appleBusinessPage .featureProtect p span{background:linear-gradient(180deg,#fff,#f7fff8)!important}
body.appleBusinessPage .abTechOpen{margin-top:16px!important;text-align:center;color:#7f97a6!important}
/* Zero-touch rail refinement */
body.appleBusinessPage .abTimeline{
gap:8px!important; padding:20px 20px 18px!important; border-radius:26px!important;
background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(239,249,253,.92))!important;
border:1px solid rgba(102,191,223,.22)!important;
}
body.appleBusinessPage .abTimeline:before{
height:10px!important; top:56%!important; left:18px!important; right:18px!important;
background:linear-gradient(90deg,rgba(255,149,105,.18),rgba(232,102,145,.15),rgba(111,116,255,.15),rgba(69,192,244,.15),rgba(113,216,137,.18),rgba(255,194,94,.18))!important;
}
body.appleBusinessPage .abTimeline:after{
top:10px!important; bottom:10px!important; width:26%!important; border-radius:20px!important;
background:linear-gradient(90deg,rgba(255,176,139,.18),rgba(123,108,255,.16),rgba(75,199,239,.15),transparent 95%)!important;
}
body.appleBusinessPage .abTimeline span{min-height:46px!important;padding:10px 14px!important;font-size:12px!important;border-radius:14px!important}
/* Apple + Microsoft device chain */
body.appleBusinessPage .abMsDevice strong{gap:10px!important}
body.appleBusinessPage .abMsDevice strong span{
position:relative; overflow:hidden; min-width:88px!important; padding:12px 16px!important; border-radius:999px!important;
background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(233,247,255,.95))!important;
border:1px solid rgba(104,190,223,.18)!important;
box-shadow:0 14px 34px rgba(64,130,160,.08), inset 0 1px 0 rgba(255,255,255,.9)!important;
animation:abFloatChip 5s ease-in-out infinite;
}
body.appleBusinessPage .abMsDevice strong span:nth-child(1){animation-delay:0s}
body.appleBusinessPage .abMsDevice strong span:nth-child(3){animation-delay:1s}
body.appleBusinessPage .abMsDevice strong span:nth-child(5){animation-delay:2s}
body.appleBusinessPage .abMsDevice strong i{
position:relative!important; width:34px!important; height:4px!important; border-radius:999px!important;
background:linear-gradient(90deg,rgba(76,200,239,.5),rgba(123,108,255,.65))!important; overflow:hidden;
}
body.appleBusinessPage .abMsDevice strong i:after{
content:""; position:absolute; left:-10px; top:50%; transform:translateY(-50%); width:10px; height:10px; border-radius:50%;
background:linear-gradient(135deg,#62ccf1,#7c6cff); box-shadow:0 0 0 4px rgba(98,204,241,.12),0 6px 14px rgba(77,139,187,.24);
animation:abConnectorDot 3.6s linear infinite;
}
body.appleBusinessPage .abMsDevice strong i:nth-of-type(2):after{animation-delay:1.8s}
body.appleBusinessPage .abMsDevice small{margin-top:14px!important}
/* Security heading and support tone */
body.appleBusinessPage .abSecurityCard.identity h3 span,
body.appleBusinessPage .abSecurityCard.access h3 span{
display:inline-block;background:linear-gradient(90deg,#ff9e69,#b56cff 55%,#57c8ef 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Lifecycle: more glassy and colorful */
body.appleBusinessPage .abLifecycleFlow{padding-top:30px!important}
body.appleBusinessPage .abLifeItem{
background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(241,250,254,.92))!important;
border:1px solid rgba(97,188,220,.18)!important;
box-shadow:0 18px 40px rgba(60,128,158,.08)!important;
}
body.appleBusinessPage .abLifeItem:before{background:linear-gradient(135deg,#4cc8ef,#7e6cff)!important}
body.appleBusinessPage .abLifeItem:nth-child(3n+1):before{background:linear-gradient(135deg,#ff9e63,#ff7a7a)!important}
body.appleBusinessPage .abLifeItem:nth-child(3n+2):before{background:linear-gradient(135deg,#4cc8ef,#67dfb0)!important}
body.appleBusinessPage .abLifeItem:nth-child(3n):before{background:linear-gradient(135deg,#7b6cff,#4ec2ef)!important}
@keyframes abConnectorDot{0%{left:-10px;opacity:0}10%{opacity:1}100%{left:calc(100% - 8px);opacity:1}}
@keyframes abFloatChip{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(max-width:1100px){
body.appleBusinessPage .abFeatureColumns{grid-template-columns:1fr!important}
}
@media(max-width:760px){
body.appleBusinessPage .abFeatureColumns p{grid-template-columns:repeat(2,minmax(0,1fr))!important}
body.appleBusinessPage .abTimeline{padding:18px!important}
}
/* =========================
V48 – Apple refinement
========================= */
body.appleBusinessPage .abZeroTouch .abZeroHead h2 .grad-zero-a{
background:linear-gradient(90deg,#ffbc78 0%,#ff8a63 52%,#ff7a7d 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abZeroTouch .abZeroHead h2 .grad-zero-b{
background:linear-gradient(90deg,#ff9d6f 0%,#ff8074 45%,#b26cff 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abZeroTouch .abZeroHead h2 .grad-zero-c{
background:linear-gradient(90deg,#ffb36b 0%,#ff7d73 36%,#856fff 68%,#53c9f0 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abZeroTouch .abZeroHead h2 .grad-zero-a,
body.appleBusinessPage .abZeroTouch .abZeroHead h2 .grad-zero-b,
body.appleBusinessPage .abZeroTouch .abZeroHead h2 .grad-zero-c,
body.appleBusinessPage .abManager .abCopy h2 span,
body.appleBusinessPage .abMdmCopy h2 span,
body.appleBusinessPage .abMicrosoft .abSectionHead h2 span,
body.appleBusinessPage .abSecurity h2 span,
body.appleBusinessPage .abSupport .abCopy h2 span,
body.appleBusinessPage .abLifecycle .abSectionHead h2 span,
body.appleBusinessPage .abOffers .abSectionHead h2 span,
body.appleBusinessPage .abProcurement h2 span,
body.appleBusinessPage .abExpertise h2 span,
body.appleBusinessPage .abContact h2 span{
display:inline-block;
}
body.appleBusinessPage .abManager .abCopy h2 span{
background:linear-gradient(90deg,#5acaf0 0%,#7b6cff 52%,#ff8b79 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abMdmCopy h2 span{
background:linear-gradient(90deg,#52c9ef 0%,#7e6cff 42%,#ff946c 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abMicrosoft .abSectionHead h2 span{
background:linear-gradient(90deg,#59cef0 0%,#6f8cff 38%,#a66dff 68%,#ff9d77 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abSecurity h2 span{
background:linear-gradient(90deg,#ffab70 0%,#ff7b80 34%,#8a72ff 66%,#56caf0 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abSupport .abCopy h2 span{
background:linear-gradient(90deg,#ffb16b 0%,#ff816e 34%,#886fff 64%,#55caf0 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abLifecycle .abSectionHead h2 span{
background:linear-gradient(90deg,#58c9ef 0%,#7d6cff 48%,#ffa26e 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abOffers .abSectionHead h2 span{
background:linear-gradient(90deg,#ffa56d 0%,#ff7c7f 35%,#6d78ff 70%,#4ec7ef 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abProcurement h2 span{
background:linear-gradient(90deg,#56c8ef 0%,#76b5ff 34%,#9f74ff 66%,#ff956d 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abExpertise h2 span{
background:linear-gradient(90deg,#ffbe70 0%,#ff8d67 28%,#7d6cff 68%,#56c9ef 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abContact h2 span{
background:linear-gradient(90deg,#59c9ef 0%,#7d6cff 45%,#ff976e 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Softer, glassier zero-touch flow */
body.appleBusinessPage .abZeroTouch{background:linear-gradient(180deg,#081722 0%,#0d2230 100%)!important}
body.appleBusinessPage .abTimeline{
position:relative;gap:8px!important;margin-top:38px!important;padding:18px 22px!important;border-radius:28px!important;
background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(239,249,253,.14))!important;
border:1px solid rgba(255,255,255,.16)!important;backdrop-filter:blur(18px);overflow:auto;isolation:isolate;
}
body.appleBusinessPage .abTimeline::before{
content:"";position:absolute;inset:10px;border-radius:22px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
pointer-events:none;z-index:0;
}
body.appleBusinessPage .abTimeline::after{
content:"";position:absolute;top:10px;bottom:10px;left:-22%;width:32%;border-radius:999px;
background:radial-gradient(circle at center,rgba(255,255,255,.7) 0,rgba(255,255,255,.28) 28%,rgba(255,255,255,.07) 56%,transparent 72%);
filter:blur(6px);mix-blend-mode:screen;pointer-events:none;z-index:1;animation:abTimelineGlowSweep 5.8s ease-in-out infinite;
}
body.appleBusinessPage .abTimeline span,
body.appleBusinessPage .abTimeline b{position:relative;z-index:2}
body.appleBusinessPage .abTimeline span{
min-height:42px!important;padding:10px 13px!important;border-radius:14px!important;font-size:12px!important;font-weight:850!important;
color:#ffffff!important;border:1px solid rgba(255,255,255,.16)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 10px 24px rgba(17,49,67,.16)!important;
backdrop-filter:blur(14px);background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.09))!important;
}
body.appleBusinessPage .abTimeline span:nth-of-type(1){background:linear-gradient(135deg,rgba(255,166,111,.54),rgba(255,112,122,.42))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(2){background:linear-gradient(135deg,rgba(255,140,118,.52),rgba(231,92,141,.42))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(3){background:linear-gradient(135deg,rgba(164,121,255,.48),rgba(111,116,255,.42))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(4){background:linear-gradient(135deg,rgba(110,161,255,.48),rgba(77,189,244,.42))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(5){background:linear-gradient(135deg,rgba(72,145,248,.5),rgba(56,114,224,.44))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(6){background:linear-gradient(135deg,rgba(72,201,239,.46),rgba(74,218,174,.40))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(7){background:linear-gradient(135deg,rgba(67,208,177,.46),rgba(126,213,108,.40))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(8){background:linear-gradient(135deg,rgba(151,208,89,.46),rgba(209,197,88,.40))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(9){background:linear-gradient(135deg,rgba(112,160,255,.52),rgba(123,108,255,.46))!important}
body.appleBusinessPage .abTimeline span.active{background:linear-gradient(135deg,rgba(82,201,239,.55),rgba(122,108,255,.52))!important;color:#fff!important}
body.appleBusinessPage .abTimeline b{color:rgba(255,255,255,.48)!important;font-size:12px!important}
/* MDM cards: no top icons, uniform widths, vertical chips */
body.appleBusinessPage .abFeatureColumns{grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch!important;gap:18px!important}
body.appleBusinessPage .abFeatureColumns>div{display:flex!important;flex-direction:column!important;min-height:100%!important;padding:22px 18px!important;border-radius:24px!important}
body.appleBusinessPage .abFeatureTop img{display:none!important}
body.appleBusinessPage .abFeatureTop{margin-bottom:14px!important;justify-content:center!important}
body.appleBusinessPage .abFeatureColumns h3{text-align:center!important;font-size:22px!important}
body.appleBusinessPage .abFeatureColumns p{display:flex!important;flex-direction:column!important;gap:10px!important;margin-top:4px!important}
body.appleBusinessPage .abFeatureColumns p span{
width:100%!important;max-width:none!important;min-height:48px!important;padding:12px 14px!important;border-radius:16px!important;
display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;
font-size:14px!important;font-weight:800!important;color:#214a62!important;
background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(241,248,252,.94))!important;
border:1px solid rgba(103,188,221,.18)!important;box-shadow:0 8px 22px rgba(69,136,167,.06), inset 0 1px 0 rgba(255,255,255,.85)!important;
}
body.appleBusinessPage .abFeatureColumns p span:before,
body.appleBusinessPage .abFeatureColumns p span:after{display:none!important;content:none!important}
body.appleBusinessPage .featureDeploy p span{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,247,249,.95))!important}
body.appleBusinessPage .featureManage p span{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(243,250,255,.95))!important}
body.appleBusinessPage .featureProtect p span{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,255,247,.95))!important}
/* Apple + Microsoft device chain cleaner and more animated */
body.appleBusinessPage .abMsDevice{padding:26px 22px!important}
body.appleBusinessPage .abMsDevice strong{
display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;flex-wrap:nowrap!important;font-size:0!important;overflow:hidden;
}
body.appleBusinessPage .abMsDevice strong span{
min-width:92px!important;padding:12px 16px!important;border-radius:999px!important;white-space:nowrap;
background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(232,246,255,.95))!important;border:1px solid rgba(104,190,223,.20)!important;
box-shadow:0 14px 34px rgba(64,130,160,.08), inset 0 1px 0 rgba(255,255,255,.92)!important;
color:#123a53!important;font-size:16px!important;font-weight:850!important;position:relative;
}
body.appleBusinessPage .abMsDevice strong span::after{
content:"";position:absolute;inset:-1px;border-radius:999px;padding:1px;background:linear-gradient(135deg,rgba(77,202,239,.55),rgba(126,108,255,.55));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.55;
}
body.appleBusinessPage .abMsDevice strong i{display:block!important;position:relative!important;width:44px!important;height:5px!important;border-radius:999px!important;background:linear-gradient(90deg,rgba(87,201,239,.45),rgba(123,108,255,.55))!important;overflow:hidden}
body.appleBusinessPage .abMsDevice strong i:after{
content:""!important;position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;
background:linear-gradient(135deg,#ffd06d,#7d6cff);box-shadow:0 0 0 4px rgba(125,108,255,.10),0 6px 16px rgba(72,133,180,.24);animation:abConnectorDot 3.4s linear infinite;
}
body.appleBusinessPage .abMsDevice strong i:nth-of-type(2):after{animation-delay:1.7s}
body.appleBusinessPage .abMsStatement{color:#bceefd!important}
/* Support / procurement / contact cards a little more alive */
body.appleBusinessPage .abSupportCard{background:linear-gradient(145deg,#ffffff,#f4fbfe)!important}
body.appleBusinessPage .abProcurementGrid, body.appleBusinessPage .abContactInner{
position:relative; overflow:hidden; border-radius:30px;
}
body.appleBusinessPage .abContactInner{padding:34px 38px!important;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(240,250,255,.96))!important;border:1px solid rgba(96,187,221,.18)!important;box-shadow:0 22px 52px rgba(52,118,150,.08)!important}
@keyframes abTimelineGlowSweep{0%{left:-24%;opacity:.0}8%{opacity:1}50%{left:36%;opacity:.9}100%{left:96%;opacity:0}}
@keyframes abConnectorDot{0%{left:-10px;opacity:0}8%{opacity:1}100%{left:calc(100% - 8px);opacity:1}}
@media(max-width:1100px){
body.appleBusinessPage .abFeatureColumns{grid-template-columns:1fr!important}
}
@media(max-width:760px){
body.appleBusinessPage .abMsDevice strong{flex-wrap:wrap!important;justify-content:center!important}
body.appleBusinessPage .abMsDevice strong i{width:28px!important}
}
/* =========================
V49 – Apple page light cleanup
========================= */
body.appleBusinessPage .abZeroTouch{
background:
radial-gradient(circle at 12% 18%, rgba(255,178,112,.14), transparent 24%),
radial-gradient(circle at 82% 26%, rgba(93,207,243,.14), transparent 28%),
linear-gradient(180deg,#f8fcff 0%,#eef8fd 100%)!important;
color:#153b55!important;
}
body.appleBusinessPage .abZeroHead h2{color:#153b55!important}
body.appleBusinessPage .abZeroHead>p{color:#6d8798!important}
body.appleBusinessPage .abZeroTouch .abEyebrow{color:#49bde6!important}
body.appleBusinessPage .abZeroTouch .abZeroHead h2 .grad-zero-a{
background:linear-gradient(90deg,#ffb96f 0%,#ff9867 44%,#ff816f 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abZeroTouch .abZeroHead h2 .grad-zero-b{
background:linear-gradient(90deg,#ff9d67 0%,#ff8074 35%,#bd6bff 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abZeroTouch .abZeroHead h2 .grad-zero-c{
background:linear-gradient(90deg,#ffb870 0%,#ff9369 34%,#8a74ff 66%,#55c9ef 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abTimeline{
position:relative;
margin-top:34px!important;
padding:16px 18px!important;
gap:8px!important;
border-radius:26px!important;
background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(236,248,253,.96))!important;
border:1px solid rgba(100,190,223,.20)!important;
box-shadow:0 18px 44px rgba(56,127,160,.08), inset 0 1px 0 rgba(255,255,255,.88)!important;
backdrop-filter:blur(16px);
overflow-x:auto!important;
overflow-y:hidden!important;
scrollbar-width:none!important;
-ms-overflow-style:none!important;
isolation:isolate;
}
body.appleBusinessPage .abTimeline::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
body.appleBusinessPage .abTimeline::before{
content:"";position:absolute;left:14px;right:14px;top:50%;height:14px;transform:translateY(-50%);
border-radius:999px;
background:linear-gradient(90deg,rgba(255,169,117,.10),rgba(230,118,149,.08),rgba(120,110,255,.08),rgba(84,200,240,.08),rgba(103,216,136,.10));
box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
z-index:0;pointer-events:none;
}
body.appleBusinessPage .abTimeline::after{
content:"";position:absolute;top:8px;bottom:8px;left:-24%;width:28%;border-radius:999px;
background:radial-gradient(circle at center,rgba(255,255,255,.96) 0,rgba(255,255,255,.45) 24%,rgba(255,255,255,.16) 52%,transparent 74%);
filter:blur(3px);opacity:.9;pointer-events:none;z-index:1;
animation:abTimelineGlowSweepLight 6.6s ease-in-out infinite;
}
body.appleBusinessPage .abTimeline span,
body.appleBusinessPage .abTimeline b{position:relative;z-index:2}
body.appleBusinessPage .abTimeline span{
min-height:42px!important;padding:10px 14px!important;border-radius:14px!important;white-space:nowrap;
color:#ffffff!important;border:1px solid rgba(255,255,255,.7)!important;
box-shadow:0 10px 24px rgba(58,127,160,.08), inset 0 1px 0 rgba(255,255,255,.46)!important;
backdrop-filter:blur(12px);
}
body.appleBusinessPage .abTimeline span:nth-of-type(1){background:linear-gradient(135deg,rgba(255,169,117,.88),rgba(255,136,111,.74))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(2){background:linear-gradient(135deg,rgba(255,154,116,.86),rgba(236,111,144,.72))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(3){background:linear-gradient(135deg,rgba(170,125,255,.84),rgba(118,118,255,.72))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(4){background:linear-gradient(135deg,rgba(122,170,255,.84),rgba(87,194,247,.72))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(5){background:linear-gradient(135deg,rgba(85,152,248,.86),rgba(72,113,232,.72))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(6){background:linear-gradient(135deg,rgba(95,210,241,.82),rgba(84,221,180,.70))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(7){background:linear-gradient(135deg,rgba(93,212,176,.82),rgba(132,220,111,.70))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(8){background:linear-gradient(135deg,rgba(170,213,95,.84),rgba(214,198,88,.72))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(9),
body.appleBusinessPage .abTimeline span.active{background:linear-gradient(135deg,rgba(112,162,255,.88),rgba(123,108,255,.78))!important}
body.appleBusinessPage .abTimeline b{color:#8ab0c3!important;font-size:12px!important}
body.appleBusinessPage .abMdm{background:linear-gradient(180deg,#f4fbfe 0%,#eef9fd 100%)!important}
body.appleBusinessPage .abMdmCopy h2 span{
background:linear-gradient(90deg,#ffb56f 0%,#ff8f68 30%,#7d6cff 70%,#52c8ef 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abFeatureColumns{align-items:stretch!important;gap:18px!important}
body.appleBusinessPage .abFeatureColumns>div{
display:flex!important;flex-direction:column!important;min-height:100%!important;
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(243,250,254,.96))!important;
}
body.appleBusinessPage .abFeatureColumns p{display:flex!important;flex-direction:column!important;gap:10px!important}
body.appleBusinessPage .abFeatureColumns p span{
width:100%!important;min-height:48px!important;max-width:none!important;
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,249,252,.96))!important;
border:1px solid rgba(104,190,223,.16)!important;
box-shadow:0 8px 20px rgba(60,128,160,.06), inset 0 1px 0 rgba(255,255,255,.92)!important;
color:#214c63!important;
}
body.appleBusinessPage .featureDeploy p span{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,247,246,.96))!important}
body.appleBusinessPage .featureManage p span{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,248,255,.96))!important}
body.appleBusinessPage .featureProtect p span{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,252,246,.96))!important}
body.appleBusinessPage .abSupport .abCopy h2 span{display:inline;background:linear-gradient(90deg,#ffb36e 0%,#ff8a6b 34%,#7f6cff 66%,#53c8ef 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
body.appleBusinessPage .abOfferLayout{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}
body.appleBusinessPage .abOfferMain,
body.appleBusinessPage .abOfferSmall{
grid-row:auto!important;min-height:300px!important;padding:32px!important;
background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(240,249,254,.96))!important;
color:#163b54!important;
}
body.appleBusinessPage .abOfferMain h3,
body.appleBusinessPage .abOfferSmall h3{font-size:40px!important;color:#163b54!important}
body.appleBusinessPage .abOfferMain p,
body.appleBusinessPage .abOfferSmall p,
body.appleBusinessPage .abOfferWide p{color:#6d8898!important}
body.appleBusinessPage .abOfferMain small,
body.appleBusinessPage .abOfferSmall small{color:#7692a3!important}
body.appleBusinessPage .abOfferWide{grid-column:1/-1!important;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(241,250,254,.96))!important}
body.appleBusinessPage .abProcurementDevices{
background:radial-gradient(circle at 65% 40%,#def6fd 0%,#f6fbfd 68%)!important;
}
/* Legacy img:first-child/img:last-child sizing rules removed here (V82 cleanup) —
they were left over from an older layout and, due to higher CSS specificity than
the newer .device-ipad / .phone-single rules, silently forced the iPhone image
back down to 46% width no matter what later overrides tried to set. */
body.appleBusinessPage .abProcurement h2 span{
background:linear-gradient(90deg,#ffb16e 0%,#ff8c6c 30%,#806cff 68%,#53c9ef 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abMicrosoft .abSectionHead h2 span{
background:linear-gradient(90deg,#56c9ef 0%,#75b6ff 35%,#a06fff 66%,#ff9a71 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abMsDevice strong span:nth-of-type(1){background:linear-gradient(145deg,rgba(237,247,255,.98),rgba(225,242,255,.95))!important}
body.appleBusinessPage .abMsDevice strong span:nth-of-type(3){background:linear-gradient(145deg,rgba(245,240,255,.98),rgba(233,239,255,.95))!important}
body.appleBusinessPage .abMsDevice strong span:nth-of-type(5){background:linear-gradient(145deg,rgba(255,244,236,.98),rgba(255,239,231,.95))!important}
body.appleBusinessPage .abMsDevice strong span::after{opacity:.72!important}
body.appleBusinessPage .abLifecycle .abSectionHead h2 span,
body.appleBusinessPage .abContact h2 span,
body.appleBusinessPage .abExpertise h2 span,
body.appleBusinessPage .abOffers .abSectionHead h2 span,
body.appleBusinessPage .abStatement h2 span,
body.appleBusinessPage .abSecurity h2 span{
display:inline-block;
}
body.appleBusinessPage .abLifecycle .abSectionHead h2 span{background:linear-gradient(90deg,#59c9ef 0%,#7d6cff 44%,#ffa46f 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
body.appleBusinessPage .abOffers .abSectionHead h2 span{background:linear-gradient(90deg,#ffac70 0%,#ff7f79 35%,#7e6cff 66%,#57c8ef 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
body.appleBusinessPage .abExpertise h2 span{background:linear-gradient(90deg,#56c9ef 0%,#7a6dff 45%,#ff9b70 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
body.appleBusinessPage .abContact h2 span{background:linear-gradient(90deg,#ffb270 0%,#ff8b6c 35%,#806dff 65%,#58c9ef 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes abTimelineGlowSweepLight{0%{left:-26%;opacity:0}10%{opacity:1}52%{left:38%;opacity:.95}100%{left:98%;opacity:0}}
@keyframes abPhoneHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:1100px){
body.appleBusinessPage .abOfferLayout{grid-template-columns:1fr!important}
body.appleBusinessPage .abOfferMain,
body.appleBusinessPage .abOfferSmall,
body.appleBusinessPage .abOfferWide{min-height:unset!important}
}
@media(max-width:760px){
body.appleBusinessPage .abTimeline{padding:16px!important}
body.appleBusinessPage .abTimeline span{font-size:11px!important}
}
body.appleBusinessPage .abStatement h2 span{
background:linear-gradient(90deg,#ffb36f 0%,#ff8e68 34%,#9d70ff 70%,#55caef 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abManager .abCopy h2 span{
background:linear-gradient(90deg,#ffb56f 0%,#ff8f69 30%,#7c6cff 66%,#57c9ef 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* =========================
V50 – Apple light refinement, procurement cleanup and homepage polish
========================= */
body.appleBusinessPage .abZeroTouch{
background:linear-gradient(180deg,#f8fcff 0%,#eff8fd 100%)!important;
color:#153b54!important;
}
body.appleBusinessPage .abZeroHead>p{color:#6d8798!important}
body.appleBusinessPage .abZeroHead h2 .grad-zero-a,
body.appleBusinessPage .abZeroHead h2 .grad-zero-b,
body.appleBusinessPage .abZeroHead h2 .grad-zero-c{
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abZeroHead h2 .grad-zero-a{
background:linear-gradient(135deg,#d97822 0%,#f09539 100%)!important;
}
body.appleBusinessPage .abZeroHead h2 .grad-zero-b{
background:linear-gradient(135deg,#ec8e3a 0%,#f4af57 100%)!important;
}
body.appleBusinessPage .abZeroHead h2 .grad-zero-c{
background:linear-gradient(135deg,#f3a64b 0%,#ffd36d 100%)!important;
}
body.appleBusinessPage .abTimeline{
background:linear-gradient(145deg,#ffffff,#f3fbff)!important;
border:1px solid rgba(95,184,220,.18)!important;
box-shadow:0 20px 54px rgba(54,126,160,.08)!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scrollbar-width:none!important;
-ms-overflow-style:none!important;
}
body.appleBusinessPage .abTimeline::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
body.appleBusinessPage .abTimeline:before{
height:4px!important;left:28px!important;right:28px!important;opacity:.18!important;
background:linear-gradient(90deg,rgba(242,158,90,.55),rgba(243,140,100,.55),rgba(123,108,255,.45),rgba(89,211,247,.45),rgba(133,218,110,.45))!important;
background-size:100% 100%!important;
animation:none!important;
}
body.appleBusinessPage .abTimeline:after{
top:50%!important;left:28px!important;width:110px!important;height:110px!important;transform:translateY(-50%)!important;
border-radius:999px!important;
background:radial-gradient(circle,rgba(255,255,255,.82) 0%,rgba(255,255,255,.34) 42%,rgba(255,255,255,0) 74%)!important;
box-shadow:none!important;filter:blur(2px)!important;animation:abSoftFlow 6.8s ease-in-out infinite!important;
}
body.appleBusinessPage .abTimeline span{
backdrop-filter:blur(10px)!important;
color:#33566a!important;
border:1px solid rgba(255,255,255,.58)!important;
box-shadow:0 10px 24px rgba(54,126,160,.08), inset 0 1px 0 rgba(255,255,255,.78)!important;
}
body.appleBusinessPage .abTimeline span:before{opacity:.45!important}
body.appleBusinessPage .abTimeline span:nth-of-type(1){background:linear-gradient(135deg,rgba(255,169,117,.62),rgba(255,136,111,.56))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(2){background:linear-gradient(135deg,rgba(255,154,116,.60),rgba(236,111,144,.52))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(3){background:linear-gradient(135deg,rgba(170,125,255,.58),rgba(118,118,255,.50))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(4){background:linear-gradient(135deg,rgba(122,170,255,.56),rgba(87,194,247,.48))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(5){background:linear-gradient(135deg,rgba(85,152,248,.58),rgba(72,113,232,.50))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(6){background:linear-gradient(135deg,rgba(95,210,241,.54),rgba(84,221,180,.46))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(7){background:linear-gradient(135deg,rgba(93,212,176,.54),rgba(132,220,111,.46))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(8){background:linear-gradient(135deg,rgba(170,213,95,.56),rgba(214,198,88,.50))!important}
body.appleBusinessPage .abTimeline span:nth-of-type(9){background:linear-gradient(135deg,rgba(112,160,255,.58),rgba(123,108,255,.52))!important}
body.appleBusinessPage .abOfferLayout{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}
body.appleBusinessPage .abOfferMain,
body.appleBusinessPage .abOfferSmall,
body.appleBusinessPage .abOfferWide{
grid-row:auto!important;
min-height:260px!important;
display:flex!important;flex-direction:column!important;justify-content:space-between!important;
}
body.appleBusinessPage .abOfferMain{
background:linear-gradient(145deg,#fafdff,#eef8fe)!important;
color:#163b54!important;
border:1px solid rgba(95,184,220,.18)!important;
box-shadow:0 20px 48px rgba(54,126,160,.09)!important;
}
body.appleBusinessPage .abOfferMain span,
body.appleBusinessPage .abOfferMain h3,
body.appleBusinessPage .abOfferMain small,
body.appleBusinessPage .abOfferMain p{color:inherit!important}
body.appleBusinessPage .abOfferMain .abPrimary{align-self:flex-start}
body.appleBusinessPage .abProcurement{background:linear-gradient(180deg,#fff,#f8fcff)!important}
body.appleBusinessPage .abProcurement h2{max-width:640px!important}
body.appleBusinessPage .abProcurement h2 span{
background:linear-gradient(135deg,#ffb36e 0%,#ff8f73 48%,#f06f8e 100%)!important;
-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
body.appleBusinessPage .abProcurementGrid{align-items:center!important;gap:44px!important}
body.appleBusinessPage .abProcurementDevices{display:flex!important;justify-content:center!important;align-items:center!important;min-height:440px!important}
body.appleBusinessPage .abProcurementPlate{
position:relative;display:flex;align-items:center;justify-content:center;gap:28px;
width:min(100%,620px);min-height:360px;padding:28px 28px 18px;border-radius:34px;
background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(243,250,255,.94));
border:1px solid rgba(102,189,221,.18);box-shadow:0 24px 60px rgba(55,129,162,.10);
}
body.appleBusinessPage .abProcurementPlate:before{
content:"";position:absolute;inset:12px;border-radius:26px;pointer-events:none;
background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(255,255,255,.24));border:1px solid rgba(255,255,255,.56);
}
body.appleBusinessPage .abProcurementPlate>*{position:relative;z-index:1}
body.appleBusinessPage .abProcurementPlate .device-ipad{
width:min(54%,280px)!important;height:auto!important;object-fit:contain!important;
filter:drop-shadow(0 18px 30px rgba(60,125,158,.16));transform:translateY(-4px) rotate(-6deg);
}
body.appleBusinessPage .abProcurementPhones{position:relative;width:min(36%,210px);height:290px;display:flex;align-items:center;justify-content:center}
body.appleBusinessPage .abProcurementPhones img{
position:absolute;width:56%;height:auto;object-fit:contain;filter:drop-shadow(0 18px 28px rgba(60,125,158,.16));
}
body.appleBusinessPage .abProcurementPhones .phone-one{left:6%;bottom:20px;animation:abPhoneFloatA 5.8s ease-in-out infinite}
body.appleBusinessPage .abProcurementPhones .phone-two{right:2%;top:18px;transform:scale(.96);animation:abPhoneFloatB 6.2s ease-in-out infinite}
body.appleBusinessPage .abSupport h2 span,
body.appleBusinessPage .abContact h2 span,
body.appleBusinessPage .abExpertise h2 span,
body.appleBusinessPage .abStatement h2 span,
body.appleBusinessPage .abLifecycle .abSectionHead h2 span{
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.appleBusinessPage .abSupport h2 span{
background:linear-gradient(135deg,#57c7eb 0%,#7c6cff 48%,#52dcc7 100%)!important;
}
body.appleBusinessPage .abContact h2 span{
background:linear-gradient(135deg,#ffb36d 0%,#ff8f72 52%,#ef728d 100%)!important;
}
body.appleBusinessPage .abExpertise h2 span{
background:linear-gradient(135deg,#65ccef 0%,#5d88ff 48%,#7a6cff 100%)!important;
}
body.appleBusinessPage .abLifecycle .abSectionHead h2 span{
background:linear-gradient(135deg,#55c9ef 0%,#75adff 52%,#49d8cf 100%)!important;
}
body.appleBusinessPage .abMsCanvas{
background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(241,250,255,.92))!important;
border:1px solid rgba(99,188,220,.16)!important;box-shadow:0 22px 54px rgba(54,126,160,.08)!important;
}
body.appleBusinessPage .abMsLine{background:linear-gradient(90deg,rgba(93,202,239,.25),rgba(123,108,255,.24))!important}
body.appleBusinessPage .abMsDevice{min-height:160px!important}
body.appleBusinessPage .abMsDevice strong span{min-width:0!important}
.hero{
position:relative;overflow:hidden;
background:
radial-gradient(circle at 12% 18%,rgba(87,201,239,.13),transparent 26%),
radial-gradient(circle at 88% 20%,rgba(123,108,255,.10),transparent 24%),
linear-gradient(180deg,#f7fcff 0%,#edf8fd 100%);
}
.hero:before,
.hero:after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(8px)}
.hero:before{width:280px;height:280px;left:-90px;top:90px;background:radial-gradient(circle,rgba(87,201,239,.18),transparent 68%)}
.hero:after{width:320px;height:320px;right:-110px;bottom:-90px;background:radial-gradient(circle,rgba(123,108,255,.12),transparent 68%)}
.heroGrid{position:relative;z-index:1}
.heroGlassNote{background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(239,248,255,.72))!important;border:1px solid rgba(93,184,219,.16)!important;box-shadow:0 20px 50px rgba(54,126,160,.09)!important}
.worldCard{position:relative;overflow:hidden}
.worldCard:after{content:"";position:absolute;inset:auto -20% -25% auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(94,203,240,.16),transparent 68%);pointer-events:none}
.appleHomeFeature{
position:relative;
background:linear-gradient(180deg,#f6fbfe 0%,#eef9fe 100%)!important;
}
.appleHomeFeature:before{content:"";position:absolute;left:-110px;top:60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,182,106,.12),transparent 70%);filter:blur(8px);pointer-events:none}
.appleHomeFeature:after{content:"";position:absolute;right:-120px;bottom:40px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(86,210,237,.14),transparent 70%);filter:blur(8px);pointer-events:none}
.appleHomeCopy h2 span{background:linear-gradient(135deg,#57c7eb 0%,#7a6cff 48%,#53dcc7 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.appleHomeVisual{background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(239,249,255,.88))!important;border:1px solid rgba(102,189,221,.16)!important;box-shadow:0 24px 60px rgba(54,126,160,.10)!important}
@keyframes abSoftFlow{0%{left:18px;opacity:.75}50%{opacity:1}100%{left:calc(100% - 128px);opacity:.75}}
@keyframes abPhoneFloatA{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-14px) rotate(-5deg)}}
@keyframes abPhoneFloatB{0%,100%{transform:translateY(0) scale(.96) rotate(5deg)}50%{transform:translateY(12px) scale(.96) rotate(3deg)}}
@media(max-width:980px){
body.appleBusinessPage .abOfferLayout{grid-template-columns:1fr!important}
body.appleBusinessPage .abProcurementPlate{gap:18px;min-height:320px;padding:24px}
body.appleBusinessPage .abProcurementPhones{width:44%;height:250px}
}
@media(max-width:760px){
body.appleBusinessPage .abProcurementGrid{gap:28px!important}
body.appleBusinessPage .abProcurementDevices{min-height:320px!important}
body.appleBusinessPage .abProcurementPlate{flex-direction:column;min-height:auto;padding:22px 20px}
body.appleBusinessPage .abProcurementPlate .device-ipad{width:min(86%,280px)!important;transform:none!important}
body.appleBusinessPage .abProcurementPhones{width:100%;height:210px}
body.appleBusinessPage .abProcurementPhones img{width:42%}
body.appleBusinessPage .abZeroHead h2{font-size:clamp(40px,9vw,58px)!important}
}
/* =========================
V51 – hotfix gradient-text bars + visible but clean motion
========================= */
/* IMPORTANT: keep gradient on the glyphs only; never paint a rectangular span. */
body.appleBusinessPage .abHeroCopy h1 span,
body.appleBusinessPage .abStatement h2 span,
body.appleBusinessPage .abDevices .abSectionHead h2 span,
body.appleBusinessPage .abManager .abCopy h2 span,
body.appleBusinessPage .abZeroHead h2 span,
body.appleBusinessPage .abMdmCopy h2 span,
body.appleBusinessPage .abMicrosoft .abSectionHead h2 span,
body.appleBusinessPage .abSecurity h2 span,
body.appleBusinessPage .abSupport h2 span,
body.appleBusinessPage .abLifecycle .abSectionHead h2 span,
body.appleBusinessPage .abOffers .abSectionHead h2 span,
body.appleBusinessPage .abProcurement h2 span,
body.appleBusinessPage .abExpertise h2 span,
body.appleBusinessPage .abContact h2 span,
.appleHomeCopy h2 span{
background-color:transparent!important;
-webkit-background-clip:text!important;
background-clip:text!important;
-webkit-text-fill-color:transparent!important;
color:transparent!important;
box-decoration-break:clone;
-webkit-box-decoration-break:clone;
}
/* Re-declare as background-image so background-clip is not reset by shorthand. */
body.appleBusinessPage .abHeroCopy h1 span{background-image:linear-gradient(135deg,#51c7f0 0%,#7a6bff 52%,#49d7d0 100%)!important}
body.appleBusinessPage .abStatement h2 span{background-image:linear-gradient(135deg,#ffb36f 0%,#ff8e68 44%,#ef728b 100%)!important}
body.appleBusinessPage .abDevices .abSectionHead h2 span{background-image:linear-gradient(135deg,#60cbef 0%,#7c6cff 48%,#52dcc6 100%)!important}
body.appleBusinessPage .abManager .abCopy h2 span{background-image:linear-gradient(90deg,#ffb56f 0%,#ff8f69 30%,#7c6cff 66%,#57c9ef 100%)!important}
body.appleBusinessPage .abZeroHead h2 .grad-zero-a{background-image:linear-gradient(135deg,#d97822 0%,#e98a2f 100%)!important}
body.appleBusinessPage .abZeroHead h2 .grad-zero-b{background-image:linear-gradient(135deg,#e98c36 0%,#f0a148 100%)!important}
body.appleBusinessPage .abZeroHead h2 .grad-zero-c{background-image:linear-gradient(135deg,#f3a64b 0%,#ffd36d 100%)!important}
body.appleBusinessPage .abMdmCopy h2 span{background-image:linear-gradient(90deg,#ffb56f 0%,#ff8f68 30%,#7d6cff 70%,#52c8ef 100%)!important}
body.appleBusinessPage .abMicrosoft .abSectionHead h2 span{background-image:linear-gradient(90deg,#56c9ef 0%,#75b6ff 35%,#a06fff 66%,#ff9a71 100%)!important}
body.appleBusinessPage .abSecurity h2 span{background-image:linear-gradient(90deg,#ffab70 0%,#ff7b80 34%,#8a72ff 66%,#56caf0 100%)!important}
body.appleBusinessPage .abSupport h2 span{background-image:linear-gradient(135deg,#57c7eb 0%,#7c6cff 48%,#52dcc7 100%)!important}
body.appleBusinessPage .abLifecycle .abSectionHead h2 span{background-image:linear-gradient(135deg,#55c9ef 0%,#75adff 52%,#49d8cf 100%)!important}
body.appleBusinessPage .abOffers .abSectionHead h2 span{background-image:linear-gradient(90deg,#ffac70 0%,#ff7f79 35%,#7e6cff 66%,#57c8ef 100%)!important}
body.appleBusinessPage .abProcurement h2 span{background-image:linear-gradient(135deg,#ffb36e 0%,#ff8f73 48%,#f06f8e 100%)!important}
body.appleBusinessPage .abExpertise h2 span{background-image:linear-gradient(135deg,#65ccef 0%,#5d88ff 48%,#7a6cff 100%)!important}
body.appleBusinessPage .abContact h2 span{background-image:linear-gradient(135deg,#ffb36d 0%,#ff8f72 52%,#ef728d 100%)!important}
.appleHomeCopy h2 span{background-image:linear-gradient(135deg,#57c7eb 0%,#7a6cff 48%,#53dcc7 100%)!important}
/* Make sure the support headline stays normal text flow, not a block/bar. */
body.appleBusinessPage .abSupport h2 span,
body.appleBusinessPage .abContact h2 span,
body.appleBusinessPage .abProcurement h2 span{display:inline!important;padding:0!important;border:0!important;box-shadow:none!important}
/* V75: remove any stray paint/halo around the Apple Support headline accent. */
body.appleBusinessPage .abSupport .abCopy h2,
body.appleBusinessPage .abSupport .abCopy h2 span{
filter:none!important;
text-shadow:none!important;
}
body.appleBusinessPage .abSupport .abCopy h2 span{
background:linear-gradient(90deg,#57c7eb 0%,#7c6cff 50%,#52dcc7 100%)!important;
-webkit-background-clip:text!important;
background-clip:text!important;
-webkit-text-fill-color:transparent!important;
color:transparent!important;
box-decoration-break:clone;
-webkit-box-decoration-break:clone;
}
body.appleBusinessPage .abSupport .abCopy h2 span::before,
body.appleBusinessPage .abSupport .abCopy h2 span::after{content:none!important}
/* Homepage: visible ambient motion, still light and calm. */
.hero.videoReady:before{
animation:suAmbientLeft 8.5s ease-in-out infinite alternate!important;
}
.hero.videoReady:after{
animation:suAmbientRight 10s ease-in-out infinite alternate!important;
}
.hero.videoReady .heroWash{
background:
linear-gradient(90deg,rgba(244,251,255,.55) 0%,rgba(244,251,255,.28) 44%,rgba(210,240,255,.08) 100%),
radial-gradient(circle at 78% 24%,rgba(134,223,255,.2),transparent 36%),
radial-gradient(circle at 18% 70%,rgba(124,108,255,.06),transparent 32%)!important;
}
.heroGlassNote{animation:suGlassBreathe 6s ease-in-out infinite!important}
/* Overview pages: more life without changing layout/content. */
.overviewPage .pageHero{position:relative;overflow:hidden;isolation:isolate}
.overviewPage .pageHero:before,
.overviewPage .pageHero:after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1;filter:blur(6px)}
.overviewPage .pageHero:before{width:320px;height:320px;right:-80px;top:-120px;background:radial-gradient(circle,rgba(87,201,239,.20),transparent 68%);animation:suOverviewOrbA 8s ease-in-out infinite alternate}
.overviewPage .pageHero:after{width:260px;height:260px;left:-80px;bottom:-130px;background:radial-gradient(circle,rgba(123,108,255,.10),transparent 68%);animation:suOverviewOrbB 9.5s ease-in-out infinite alternate}
.overviewPage .serviceCard:before{
content:"";position:absolute;z-index:3;top:-35%;left:-55%;width:38%;height:170%;
transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);opacity:0;pointer-events:none;
}
.overviewPage .serviceCard:hover:before{opacity:1;animation:suCardSweep .9s ease-out both}
.overviewPage .ctaBand{position:relative;overflow:hidden}
.overviewPage .ctaBand:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-90px;top:-90px;background:radial-gradient(circle,rgba(87,201,239,.16),transparent 70%);animation:suCtaGlow 7s ease-in-out infinite alternate;pointer-events:none}
/* Apple cards: a touch more visible motion instead of additional dark blocks. */
body.appleBusinessPage .abDeviceCard{transition:transform .4s ease,box-shadow .4s ease}
body.appleBusinessPage .abDeviceCard:hover{transform:translateY(-5px);box-shadow:0 30px 72px rgba(42,115,150,.13)!important}
body.appleBusinessPage .abSupportCard{transition:transform .4s ease,box-shadow .4s ease}
body.appleBusinessPage .abSupportCard:hover{transform:translateY(-3px);box-shadow:0 30px 72px rgba(61,132,166,.14)!important}
@keyframes suAmbientLeft{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(54px,-18px,0) scale(1.08)}}
@keyframes suAmbientRight{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-48px,26px,0) scale(1.07)}}
@keyframes suGlassBreathe{0%,100%{transform:translateY(0);box-shadow:0 20px 50px rgba(54,126,160,.09)}50%{transform:translateY(-5px);box-shadow:0 26px 60px rgba(54,126,160,.13)}}
@keyframes suOverviewOrbA{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-55px,38px) scale(1.12)}}
@keyframes suOverviewOrbB{0%{transform:translate(0,0) scale(1)}100%{transform:translate(70px,-24px) scale(1.08)}}
@keyframes suCardSweep{0%{left:-55%}100%{left:135%}}
@keyframes suCtaGlow{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-50px,38px) scale(1.12)}}
@media (prefers-reduced-motion:reduce){
.hero.videoReady:before,.hero.videoReady:after,.heroGlassNote,
.overviewPage .pageHero:before,.overviewPage .pageHero:after,
.overviewPage .ctaBand:after{animation:none!important}
}
/* =========================
V53 – Apple page cleanup
========================= */
/* Clean headline accent spans so no solid bars appear */
body.appleBusinessPage .abDevices .abSectionHead h2 span,
body.appleBusinessPage .abManager .abCopy h2 span,
body.appleBusinessPage .abMicrosoft .abSectionHead h2 span,
body.appleBusinessPage .abSecurity h2 span,
body.appleBusinessPage .abSupport .abCopy h2 span,
body.appleBusinessPage .abLifecycle .abSectionHead h2 span,
body.appleBusinessPage .abOffers .abSectionHead h2 span,
body.appleBusinessPage .abProcurement h2 span,
body.appleBusinessPage .abContact h2 span,
body.appleBusinessPage .abStatement h2 span{
display:inline !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
box-shadow:none !important;
background-color:transparent !important;
background-repeat:no-repeat !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
}
/* Zero-touch section: restore readable text, no broken bars */
body.appleBusinessPage .abZeroTouch{
background:linear-gradient(180deg,#fbfdff 0%,#f1f8fd 100%) !important;
color:#163b54 !important;
}
body.appleBusinessPage .abZeroHead{align-items:center !important;}
body.appleBusinessPage .abZeroHead > p{color:#6d8798 !important;}
body.appleBusinessPage .abZeroHead h2{
color:#163b54 !important;
line-height:1.02 !important;
}
body.appleBusinessPage .abZeroHead h2 .grad-zero-a,
body.appleBusinessPage .abZeroHead h2 .grad-zero-b,
body.appleBusinessPage .abZeroHead h2 .grad-zero-c{
display:inline !important;
background:none !important;
-webkit-background-clip:initial !important;
background-clip:initial !important;
box-shadow:none !important;
}
body.appleBusinessPage .abZeroHead h2 .grad-zero-a{color:#d97b22 !important;}
body.appleBusinessPage .abZeroHead h2 .grad-zero-b{color:#ec9738 !important;}
body.appleBusinessPage .abZeroHead h2 .grad-zero-c{color:#f5b24d !important;}
/* Zero-touch timeline: lighter glass look, less heavy */
body.appleBusinessPage .abTimeline{
gap:8px !important;
padding:18px !important;
border-radius:24px !important;
background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(245,250,255,.96)) !important;
border:1px solid rgba(93,182,218,.16) !important;
box-shadow:0 16px 36px rgba(54,126,160,.08) !important;
}
body.appleBusinessPage .abTimeline::before{
top:50% !important;
left:22px !important;
right:22px !important;
height:3px !important;
transform:translateY(-50%) !important;
opacity:.16 !important;
}
body.appleBusinessPage .abTimeline::after{
width:84px !important;
height:84px !important;
left:18px !important;
filter:blur(3px) !important;
}
body.appleBusinessPage .abTimeline span{
position:relative;
z-index:1;
color:#fff3d6 !important;
text-shadow:0 0 10px rgba(255,205,110,.65), 0 1px 2px rgba(70,40,0,.25) !important;
border:1px solid rgba(255,255,255,.76) !important;
box-shadow:0 10px 22px rgba(54,126,160,.06), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
/* Lifecycle cards: slightly smaller and cleaner */
body.appleBusinessPage .abLifecycleFlow{
padding:22px 4px 8px !important;
}
body.appleBusinessPage .abLifecycleTrack{gap:14px !important;}
body.appleBusinessPage .abLifeItem{
flex:0 0 206px !important;
padding:24px 16px 16px !important;
border-radius:22px !important;
background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(241,249,255,.93)) !important;
border:1px solid rgba(93,182,218,.14) !important;
box-shadow:0 14px 32px rgba(54,126,160,.06) !important;
}
body.appleBusinessPage .abLifeItem strong{font-size:17px !important;}
body.appleBusinessPage .abLifeItem p{font-size:13px !important;}
body.appleBusinessPage .abLifeItem::after{
width:calc(100% + 14px) !important;
}
/* Procurement device block: smaller tile, softer background, devices clearer */
body.appleBusinessPage .abProcurementDevices{
min-height:390px !important;
}
body.appleBusinessPage .abProcurementPlate{
width:min(100%,560px) !important;
min-height:320px !important;
gap:20px !important;
padding:24px !important;
border-radius:30px !important;
background:radial-gradient(circle at 68% 28%,rgba(227,244,251,.85),rgba(255,255,255,.98) 62%), linear-gradient(145deg,rgba(255,255,255,.98),rgba(242,249,255,.95)) !important;
box-shadow:0 18px 42px rgba(55,129,162,.08) !important;
}
body.appleBusinessPage .abProcurementPlate::before{
inset:10px !important;
border-radius:22px !important;
}
body.appleBusinessPage .abProcurementPlate .device-ipad{
width:min(52%,250px) !important;
transform:translateY(-2px) rotate(-5deg) !important;
}
body.appleBusinessPage .abProcurementPhones{
width:min(34%,180px) !important;
height:250px !important;
}
body.appleBusinessPage .abProcurementPhones img{
width:62% !important;
background:rgba(255,255,255,.96) !important;
border-radius:28px !important;
}
body.appleBusinessPage .abProcurementPhones .phone-one{left:4% !important;bottom:16px !important;}
body.appleBusinessPage .abProcurementPhones .phone-two{right:0 !important;top:16px !important;transform:scale(.94) !important;}
@media (max-width:760px){
body.appleBusinessPage .abZeroHead h2{font-size:36px !important;}
body.appleBusinessPage .abTimeline{padding:14px !important;}
body.appleBusinessPage .abLifeItem{flex-basis:182px !important;}
body.appleBusinessPage .abProcurementDevices{min-height:320px !important;}
body.appleBusinessPage .abProcurementPlate{width:100% !important;min-height:auto !important;padding:20px !important;}
body.appleBusinessPage .abProcurementPlate .device-ipad{width:min(82%,250px) !important;}
body.appleBusinessPage .abProcurementPhones{width:100% !important;height:190px !important;}
body.appleBusinessPage .abProcurementPhones img{width:40% !important;}
}
/* =========================
V54 – Procurement + CTA cleanup
========================= */
/* Procurement device showcase: full-size HD iPhone visual, balanced with iPad */
body.appleBusinessPage .abProcurementPlate{
align-items:center !important;
gap:28px !important;
}
body.appleBusinessPage .abProcurementPlate .device-ipad{
width:min(51%,270px) !important;
}
body.appleBusinessPage .abProcurementPhoneCard{
position:relative;
width:min(42%,248px);
min-width:184px;
height:318px;
border-radius:34px;
background:linear-gradient(180deg,rgba(249,253,255,.98),rgba(239,249,255,.96));
border:1px solid rgba(103,183,216,.16);
box-shadow:0 18px 42px rgba(49,118,150,.10), inset 0 1px 0 rgba(255,255,255,.96);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
animation:abPhoneCardFloat 6.6s ease-in-out infinite;
}
body.appleBusinessPage .abProcurementPhoneCard::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(91,198,238,.04));
pointer-events:none;
z-index:2;
}
body.appleBusinessPage .abProcurementPhoneCard .phone-single{
position:relative !important;
inset:auto !important;
z-index:1;
width:128% !important;
height:128% !important;
max-width:none !important;
object-fit:cover !important;
object-position:center !important;
border-radius:inherit;
filter:none !important;
transform:scale(1.04) !important;
transform-origin:center center !important;
}
@keyframes abPhoneCardFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-9px)}
}
/* Inline CTA instead of heavy button */
body.appleBusinessPage .abContactInner{
align-items:flex-end !important;
}
body.appleBusinessPage .abInlineCta{
position:relative;
display:inline-flex;
align-items:center;
gap:10px;
min-height:auto !important;
padding:6px 0 !important;
border-radius:0 !important;
background:transparent !important;
color:#1d4f69;
font-weight:850;
font-size:18px;
letter-spacing:-.01em;
white-space:nowrap;
}
body.appleBusinessPage .abInlineCta span{
position:relative;
display:inline-block;
padding-right:18px;
background-image:linear-gradient(90deg,#48b9ef 0%,#6f8cff 42%,#62d4b4 100%);
background-size:220% 100%;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
animation:abInlineGlow 4s linear infinite;
}
body.appleBusinessPage .abInlineCta span::after{
content:"→";
position:absolute;
right:0;
top:50%;
transform:translateY(-52%);
color:#58c5eb;
}
body.appleBusinessPage .abInlineCta::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:2px;
border-radius:999px;
background:linear-gradient(90deg,rgba(72,185,239,.0),rgba(72,185,239,.95),rgba(111,140,255,.9),rgba(98,212,180,.8),rgba(98,212,180,.0));
background-size:200% 100%;
animation:abInlineSweep 3.8s linear infinite;
}
body.appleBusinessPage .abInlineCta:hover{transform:none !important;opacity:.92}
@keyframes abInlineGlow{
0%{background-position:0% 50%}
100%{background-position:200% 50%}
}
@keyframes abInlineSweep{
0%{background-position:200% 50%}
100%{background-position:0% 50%}
}
@media (max-width:760px){
body.appleBusinessPage .abProcurementPhoneCard{
width:min(86%,220px);
height:236px;
}
body.appleBusinessPage .abInlineCta{font-size:16px}
}
/* =========================
V55 – richer homepage + themed overview pages + refined Apple styling
========================= */
:root{
--su-blue:#48b9ef;
--su-indigo:#6f8cff;
--su-mint:#62d4b4;
--su-violet:#7b67ff;
--su-warm:#ffb65e;
--su-rose:#ff8a90;
}
@keyframes suFloatY{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-10px)}
}
@keyframes suAuroraShift{
0%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(10px,-14px,0) scale(1.03)}
100%{transform:translate3d(0,0,0) scale(1)}
}
@keyframes suGlowSweep{
0%{background-position:0% 50%}
100%{background-position:200% 50%}
}
/* Homepage gets more colour, motion and premium depth */
body.homePage main{position:relative;overflow:hidden}
body.homePage .hero,
body.homePage .appleHomeFeature,
body.homePage .suProcess,
body.homePage .confidenceSection,
body.homePage .contactHome{position:relative;overflow:hidden}
body.homePage .hero::before,
body.homePage .hero::after,
body.homePage .appleHomeFeature::before,
body.homePage .appleHomeFeature::after{
content:"";
position:absolute;
border-radius:999px;
filter:blur(56px);
pointer-events:none;
opacity:.55;
animation:suAuroraShift 9s ease-in-out infinite;
}
body.homePage .hero::before{
width:320px;height:320px;left:-90px;top:72px;
background:radial-gradient(circle,rgba(72,185,239,.22),rgba(72,185,239,0) 72%);
}
body.homePage .hero::after{
width:360px;height:360px;right:-110px;top:46px;
background:radial-gradient(circle,rgba(111,140,255,.24),rgba(111,140,255,0) 72%);
animation-delay:-3s;
}
body.homePage .heroMedia video{filter:saturate(1.08) contrast(1.02)}
body.homePage .heroWash{
background:
radial-gradient(circle at 16% 28%,rgba(72,185,239,.18),transparent 28%),
radial-gradient(circle at 86% 22%,rgba(111,140,255,.18),transparent 26%),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.28));
}
body.homePage .heroGlassNote,
body.homePage .formCard,
body.homePage .contactAside,
body.homePage .processRail article,
body.homePage .confidenceBand,
body.homePage .worldCard,
body.homePage .appleHomeFeatureInner{
box-shadow:0 24px 60px rgba(48,101,129,.08);
}
body.homePage .worldCard{
border:1px solid rgba(137,190,221,.24);
background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(247,251,255,.92));
}
body.homePage .worldCard .shade{
background:linear-gradient(180deg,rgba(5,23,37,.02),rgba(5,23,37,.38));
}
body.homePage .worldCard:hover{transform:translateY(-6px)}
body.homePage .appleHomeFeature{
background:
radial-gradient(circle at 18% 22%,rgba(255,191,102,.12),transparent 24%),
radial-gradient(circle at 88% 28%,rgba(72,185,239,.14),transparent 26%),
linear-gradient(180deg,#f7fbfe 0%,#eef7fc 100%);
}
body.homePage .appleHomeFeature::before{
width:260px;height:260px;left:4%;top:18%;
background:radial-gradient(circle,rgba(255,182,94,.18),rgba(255,182,94,0) 72%);
}
body.homePage .appleHomeFeature::after{
width:320px;height:320px;right:2%;bottom:12%;
background:radial-gradient(circle,rgba(111,140,255,.16),rgba(111,140,255,0) 72%);
animation-delay:-2.4s;
}
body.homePage .appleHomeFeatureInner{
border:1px solid rgba(136,195,222,.18);
border-radius:34px;
padding:32px;
background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(248,252,255,.92));
backdrop-filter:blur(16px);
}
body.homePage .appleHomeVisual{position:relative}
body.homePage .appleHomeVisual::after{
content:"";
position:absolute;
inset:8% 12%;
border-radius:34px;
background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.65),rgba(255,255,255,0) 72%);
pointer-events:none;
}
body.homePage .processRail article{
border:1px solid rgba(139,196,223,.22);
background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(246,251,255,.98));
}
body.homePage .processRail article:nth-child(1){box-shadow:0 18px 40px rgba(72,185,239,.08)}
body.homePage .processRail article:nth-child(2){box-shadow:0 18px 40px rgba(111,140,255,.08)}
body.homePage .processRail article:nth-child(3){box-shadow:0 18px 40px rgba(98,212,180,.08)}
body.homePage .processRail article:nth-child(4){box-shadow:0 18px 40px rgba(255,182,94,.08)}
body.homePage .confidenceBand{
border:1px solid rgba(137,192,220,.22);
background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(241,249,253,.96));
}
body.homePage .contactHome::before{
content:"";
position:absolute;inset:0;
background:radial-gradient(circle at 20% 20%,rgba(72,185,239,.09),transparent 24%),radial-gradient(circle at 82% 24%,rgba(111,140,255,.08),transparent 22%);
pointer-events:none;
}
/* Themed section pages for a more curated, consistent look */
body.infraPage{--themeA:#58c3f0;--themeB:#6c90ff;--themeC:#dff6ff}
body.securityPage{--themeA:#49c8c6;--themeB:#57a9ff;--themeC:#e6fbfb}
body.workplacePage{--themeA:#61c4ff;--themeB:#7d6fff;--themeC:#eef4ff}
body.businessPage{--themeA:#ffb35b;--themeB:#ff7b8a;--themeC:#fff3ea}
body.connectPage{--themeA:#68d3bb;--themeB:#5ea5ff;--themeC:#edfaf5}
body.contactPage{--themeA:#70c8ff;--themeB:#67d8c1;--themeC:#eefbfd}
body.loginPage{--themeA:#73c4ff;--themeB:#7b7dff;--themeC:#f0f5ff}
body.talkPage{--themeA:#76c6ff;--themeB:#67d9bd;--themeC:#edfafd}
body.overviewPage .pageHero,
body.connectPage .detailHero,
body.platformPage .detailHero,
body.contactPage .detailHero,
body.loginPage .detailHero,
body.talkPage .detailHero{
position:relative;
overflow:hidden;
border-bottom:1px solid rgba(144,191,214,.16);
background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,251,255,.98));
}
body.overviewPage .pageHero::before,
body.connectPage .detailHero::before,
body.platformPage .detailHero::before,
body.contactPage .detailHero::before,
body.loginPage .detailHero::before,
body.talkPage .detailHero::before,
body.overviewPage .pageHero::after,
body.connectPage .detailHero::after,
body.platformPage .detailHero::after,
body.contactPage .detailHero::after,
body.loginPage .detailHero::after,
body.talkPage .detailHero::after{
content:"";
position:absolute;
border-radius:999px;
filter:blur(54px);
pointer-events:none;
animation:suAuroraShift 9s ease-in-out infinite;
}
body.overviewPage .pageHero::before,
body.connectPage .detailHero::before,
body.platformPage .detailHero::before,
body.contactPage .detailHero::before,
body.loginPage .detailHero::before,
body.talkPage .detailHero::before{
width:280px;height:280px;left:-70px;top:12px;
background:radial-gradient(circle,var(--themeA,rgba(72,185,239,.18)),transparent 70%);
opacity:.22;
}
body.overviewPage .pageHero::after,
body.connectPage .detailHero::after,
body.platformPage .detailHero::after,
body.contactPage .detailHero::after,
body.loginPage .detailHero::after,
body.talkPage .detailHero::after{
width:320px;height:320px;right:-90px;top:24px;
background:radial-gradient(circle,var(--themeB,rgba(111,140,255,.18)),transparent 70%);
opacity:.2;
animation-delay:-3s;
}
body.overviewPage .pageHero .k,
body.connectPage .detailHero .k,
body.platformPage .detailHero .k,
body.contactPage .detailHero .k,
body.loginPage .detailHero .k,
body.talkPage .detailHero .k{color:#5d88a3}
body.overviewPage .pageHero h1,
body.connectPage .detailHero h1,
body.platformPage .detailHero h1,
body.contactPage .detailHero h1,
body.loginPage .detailHero h1,
body.talkPage .detailHero h1{
background-image:linear-gradient(90deg,#17344f 0%,#17344f 56%,var(--themeA) 84%,var(--themeB) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.overviewPage .serviceCard,
body.connectPage .serviceCard,
body.platformPage .serviceCard,
body.contactPage .glassPanel,
body.loginPage .loginSplit,
body.talkPage .formCard,
body.talkPage .productHighlights{
border:1px solid rgba(140,193,219,.2);
background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,251,255,.98));
box-shadow:0 20px 46px rgba(53,112,144,.08);
}
body.overviewPage .serviceCard:hover,
body.connectPage .serviceCard:hover,
body.platformPage .serviceCard:hover{transform:translateY(-6px);border-color:rgba(113,177,208,.34)}
body.overviewPage .serviceCard .serviceBody::before,
body.connectPage .serviceCard::before,
body.platformPage .serviceCard::before{
content:"";
display:block;
width:54px;height:4px;border-radius:999px;
margin:0 0 16px;
background:linear-gradient(90deg,var(--themeA),var(--themeB));
opacity:.88;
}
body.overviewPage .ctaBand,
body.connectPage .ctaBand,
body.platformPage .ctaBand,
body.contactPage .contactWrap,
body.loginPage .loginCard,
body.talkPage .formCard,
body.talkPage .productHighlights{
position:relative;
overflow:hidden;
border:1px solid rgba(136,191,218,.22);
background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(243,249,253,.96));
}
body.overviewPage .ctaBand::before,
body.connectPage .ctaBand::before,
body.platformPage .ctaBand::before,
body.contactPage .contactWrap::before,
body.loginPage .loginCard::before,
body.talkPage .formCard::before,
body.talkPage .productHighlights::before{
content:"";
position:absolute;inset:0 auto auto 0;width:100%;height:3px;
background:linear-gradient(90deg,var(--themeA),var(--themeB));
opacity:.85;
}
/* Apple page refinement and more premium device/photo treatment */
body.appleBusinessPage .abHero,
body.appleBusinessPage .abDevices,
body.appleBusinessPage .abManager,
body.appleBusinessPage .abLifecycle,
body.appleBusinessPage .abOffers,
body.appleBusinessPage .abProcurement,
body.appleBusinessPage .abSupport,
body.appleBusinessPage .abIdentity{
position:relative;
overflow:hidden;
}
body.appleBusinessPage .abHero::before,
body.appleBusinessPage .abDevices::before,
body.appleBusinessPage .abProcurement::before{
content:"";
position:absolute;
border-radius:999px;
filter:blur(62px);
pointer-events:none;
animation:suAuroraShift 10s ease-in-out infinite;
}
body.appleBusinessPage .abHero::before{
width:300px;height:300px;right:3%;top:7%;
background:radial-gradient(circle,rgba(72,185,239,.15),rgba(72,185,239,0) 72%);
}
body.appleBusinessPage .abDevices::before{
width:280px;height:280px;left:2%;bottom:0;
background:radial-gradient(circle,rgba(111,140,255,.12),rgba(111,140,255,0) 72%);
animation-delay:-2.8s;
}
body.appleBusinessPage .abProcurement::before{
width:260px;height:260px;right:8%;bottom:4%;
background:radial-gradient(circle,rgba(255,182,94,.16),rgba(255,182,94,0) 72%);
animation-delay:-5.4s;
}
body.appleBusinessPage .abStatementInner,
body.appleBusinessPage .abSectionHead,
body.appleBusinessPage .abSupportCard,
body.appleBusinessPage .abProcurementGrid,
body.appleBusinessPage .abExpertiseInner,
body.appleBusinessPage .abContactInner{
position:relative;
z-index:1;
}
body.appleBusinessPage .abDeviceCard,
body.appleBusinessPage .abSupportCard,
body.appleBusinessPage .abOfferMain,
body.appleBusinessPage .abOfferSmall,
body.appleBusinessPage .abOfferWide,
body.appleBusinessPage .abProcurementGrid,
body.appleBusinessPage .abManagerCanvas,
body.appleBusinessPage .abIdentityCanvas,
body.appleBusinessPage .abSupportCard{
border:1px solid rgba(137,191,218,.18);
box-shadow:0 24px 56px rgba(45,103,133,.08);
}
body.appleBusinessPage .abDeviceCard{
background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,251,255,.98));
}
body.appleBusinessPage .abDeviceImage img,
body.appleBusinessPage .abSupportVisual img{
filter:drop-shadow(0 16px 26px rgba(40,87,114,.10));
}
body.appleBusinessPage .abSupportCard{
background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(244,249,253,.98));
}
body.appleBusinessPage .abProcurementGrid{
gap:34px !important;
padding:34px !important;
border-radius:36px;
background:linear-gradient(135deg,rgba(255,255,255,.84),rgba(242,249,253,.96));
backdrop-filter:blur(18px);
}
body.appleBusinessPage .abProcurementDevices{
position:relative;
min-height:360px !important;
display:flex;
align-items:center;
justify-content:center;
}
body.appleBusinessPage .abProcurementDevices::before{
content:"";
position:absolute;
inset:10px;
border-radius:34px;
background:linear-gradient(135deg,rgba(72,185,239,.08),rgba(255,255,255,.28) 34%,rgba(111,140,255,.08) 100%);
border:1px solid rgba(133,193,220,.18);
}
body.appleBusinessPage .abProcurementPlate{
position:relative;
z-index:1;
width:100% !important;
min-height:320px !important;
padding:28px !important;
border-radius:32px !important;
background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(246,250,253,.96)) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 18px 40px rgba(45,99,127,.08);
}
body.appleBusinessPage .abProcurementPlate .device-ipad{
width:min(48%,254px) !important;
animation:suFloatY 8s ease-in-out infinite;
}
body.appleBusinessPage .abProcurementPhoneCard{
width:min(40%,232px);
min-width:180px;
height:296px;
border-radius:36px;
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(251,252,255,.98));
box-shadow:0 18px 44px rgba(46,103,131,.10), inset 0 1px 0 rgba(255,255,255,.98);
animation:suFloatY 8s ease-in-out infinite;
animation-delay:-2.4s;
}
body.appleBusinessPage .abProcurementPhoneCard::before{
inset:14px;
border-radius:28px;
background:radial-gradient(circle at 26% 20%,rgba(232,244,250,.96),rgba(255,255,255,.98) 62%,rgba(246,249,252,.94) 100%);
}
body.appleBusinessPage .abProcurementPhoneCard .phone-single{
width:92%;
max-width:192px;
}
body.appleBusinessPage .abOfferMain span,
body.appleBusinessPage .abOfferSmall span,
body.appleBusinessPage .abOfferWide span,
body.appleBusinessPage .abDeviceCopy span,
body.appleBusinessPage .abSupportCopy span,
body.appleBusinessPage .abCertPrep span,
body.appleBusinessPage .abEyebrow{
letter-spacing:.16em;
}
body.appleBusinessPage .abInlineCta{font-size:19px}
body.appleBusinessPage .abInlineCta span{
background-size:240% 100%;
}
body.appleBusinessPage .abInlineCta::after{
height:2.5px;
}
/* generic polish */
@media (max-width:980px){
body.homePage .appleHomeFeatureInner{padding:24px}
body.appleBusinessPage .abProcurementGrid{padding:24px !important}
}
@media (max-width:760px){
body.appleBusinessPage .abProcurementPlate{
flex-direction:column;
gap:18px !important;
}
body.appleBusinessPage .abProcurementPlate .device-ipad{width:min(88%,252px) !important}
body.overviewPage .pageHero h1,
body.connectPage .detailHero h1,
body.platformPage .detailHero h1,
body.contactPage .detailHero h1,
body.loginPage .detailHero h1,
body.talkPage .detailHero h1{
background-image:none;color:#17344f;
}
}
/* Business platform and forms also get the softer premium treatment */
body.platformPage .shopHero,
body.platformPage .shopSection,
body.platformPage .platformStrip{
position:relative;
overflow:hidden;
}
body.platformPage .shopHero{
background:
radial-gradient(circle at 15% 18%,rgba(255,179,91,.14),transparent 24%),
radial-gradient(circle at 84% 22%,rgba(255,123,138,.12),transparent 24%),
linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.98));
}
body.platformPage .shopHero::before{
content:"";
position:absolute;right:-70px;top:-60px;width:250px;height:250px;border-radius:999px;
filter:blur(54px);
background:radial-gradient(circle,rgba(255,123,138,.18),rgba(255,123,138,0) 72%);
}
body.platformPage .shopHeroCard,
body.platformPage .packageCard,
body.platformPage .securityCard,
body.platformPage .portalMain,
body.platformPage .portalSide,
body.platformPage .platformMini{
border:1px solid rgba(224,181,157,.22);
background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(252,248,245,.98));
box-shadow:0 22px 52px rgba(116,84,60,.08);
}
body.platformPage .packageCard:hover,
body.platformPage .securityCard:hover,
body.platformPage .platformMini:hover{transform:translateY(-6px)}
body.contactPage .contactWrap,
body.loginPage .loginCard,
body.talkPage .formCard,
body.talkPage .productHighlights{
box-shadow:0 22px 52px rgba(52,108,139,.08);
}
/* =========================
V56 – Microsoft Solutions world
========================= */
body.microsoftSolutionsPage,
body.servicePage{--ms-blue:#4daff1;--ms-indigo:#5e86ff;--ms-violet:#816af7;--ms-green:#63d2b2;--ms-orange:#ffb660;--ms-surface:#f7fbfe;--ms-border:rgba(132,188,218,.22)}
.microsoftHomeFeature{position:relative;overflow:hidden;padding:0 0 40px;background:linear-gradient(180deg,#ffffff 0%,#f7fbfe 100%)}
.microsoftHomeFeature::before,
.microsoftHomeFeature::after,
.microsoftSolutionsPage .msHero::before,
.microsoftSolutionsPage .msHero::after,
.microsoftSolutionsPage .section::before{
content:"";position:absolute;border-radius:999px;filter:blur(60px);pointer-events:none;opacity:.55;animation:suAuroraShift 10s ease-in-out infinite;
}
.microsoftHomeFeature::before{width:280px;height:280px;left:-90px;top:30px;background:radial-gradient(circle,rgba(255,182,94,.14),rgba(255,182,94,0) 72%)}
.microsoftHomeFeature::after{width:340px;height:340px;right:-120px;bottom:10px;background:radial-gradient(circle,rgba(94,134,255,.14),rgba(94,134,255,0) 72%);animation-delay:-3s}
.microsoftHomeInner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:28px;align-items:center;padding:6px 0 0}
.microsoftHomeCopy h2{margin:0 0 12px;font-size:clamp(2rem,3vw,3.4rem);line-height:1.04;color:#17344f}
.microsoftHomeCopy h2 span{background-image:linear-gradient(90deg,#ffb660,#f39c49 32%,#63d2b2 67%,#4daff1 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.microsoftHomeCopy p{max-width:60ch}
.microsoftHomeVisual{position:relative}
.microsoftHomeBoard{position:relative;border-radius:34px;padding:28px;border:1px solid rgba(138,194,221,.2);background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(244,249,253,.96));backdrop-filter:blur(16px);box-shadow:0 24px 56px rgba(40,95,124,.08)}
.microsoftHomeBoard::before{content:"";position:absolute;inset:18px;border-radius:26px;background:linear-gradient(135deg,rgba(72,185,239,.07),rgba(255,255,255,.16) 38%,rgba(94,134,255,.08));border:1px solid rgba(255,255,255,.55)}
.microsoftHomeTop,.microsoftHomeTiles,.microsoftHomeFlow{position:relative;z-index:1}
.microsoftHomeTop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:18px}
.microsoftHomeTop span{font-size:12px;letter-spacing:.18em;font-weight:800;color:#6c96b0}
.microsoftHomeTop strong{font-size:20px;color:#17344f}
.microsoftHomeTiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.msMiniCard{border-radius:24px;padding:18px;border:1px solid rgba(140,194,220,.22);box-shadow:0 14px 30px rgba(51,106,136,.08);transition:transform .3s,box-shadow .3s}
.msMiniCard:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 20px 40px rgba(51,106,136,.16)}
.msMiniCard b{display:block;margin-bottom:4px;font-size:17px;color:#17344f}
.msMiniCard small{display:block;color:#557994;font-size:13px;line-height:1.5}
.msMiniCard.one{background:linear-gradient(135deg,rgba(255,179,91,.24),rgba(255,255,255,.9) 64%)}
.msMiniCard.two{background:linear-gradient(135deg,rgba(94,134,255,.2),rgba(255,255,255,.9) 64%)}
.msMiniCard.three{background:linear-gradient(135deg,rgba(99,210,178,.2),rgba(255,255,255,.9) 64%)}
.msMiniCard.four{background:linear-gradient(135deg,rgba(129,106,247,.18),rgba(255,255,255,.9) 64%)}
.microsoftHomeFlow{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.microsoftHomeFlow span{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.88);border:1px solid rgba(134,190,218,.24);font-size:13px;font-weight:700;color:#41627a}
.microsoftSolutionsPage .msHero{position:relative;overflow:hidden;padding:52px 0 26px;background:linear-gradient(180deg,#fbfdff 0%,#f3f9fd 100%)}
.microsoftSolutionsPage .msHero::before{width:330px;height:330px;left:-100px;top:18px;background:radial-gradient(circle,rgba(77,175,241,.18),rgba(77,175,241,0) 72%)}
.microsoftSolutionsPage .msHero::after{width:360px;height:360px;right:-120px;top:0;background:radial-gradient(circle,rgba(94,134,255,.16),rgba(94,134,255,0) 72%);animation-delay:-2.7s}
.microsoftSolutionsPage .section{position:relative}
.microsoftSolutionsPage .section::before{width:220px;height:220px;opacity:.18;left:auto;right:5%;top:10%;background:radial-gradient(circle,rgba(99,210,178,.18),rgba(99,210,178,0) 72%)}
.microsoftSolutionsPage .msHeroGrid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(320px,.98fr);gap:34px;align-items:center}
.microsoftSolutionsPage .msHeroCopy h1{margin:10px 0 16px;font-size:clamp(2.7rem,4vw,4.7rem);line-height:.98;letter-spacing:-.04em;color:#17344f}
.microsoftSolutionsPage .msHeroCopy h1 span{display:block;background-image:linear-gradient(90deg,var(--ms-orange) 0%,#f0b84f 30%,var(--ms-green) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.microsoftSolutionsPage .msIntroStatement h2,
.microsoftSolutionsPage .msAzureStatement h2,
.microsoftSolutionsPage .msWorkplaceStatement h2,
.microsoftSolutionsPage .msPackageBand h2,
#security .msSplitIntro h2{
background-image:linear-gradient(90deg,var(--ms-blue) 0%,var(--ms-green) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent!important;
}
.microsoftSolutionsPage .msIdentityStatement h2,
#ms365 .msSplitIntro h2,
.microsoftSolutionsPage .msMigrationStatement h2,
.microsoftSolutionsPage .msManagedStatement h2,
.microsoftSolutionsPage .msEcoStatement h2{
background-image:linear-gradient(90deg,var(--ms-violet) 0%,var(--ms-blue) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent!important;
}
.microsoftSolutionsPage .msHeroCopy .lead{max-width:62ch;font-size:1.07rem}
.microsoftSolutionsPage .msHeroMeta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.microsoftSolutionsPage .msHeroMeta span{padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.86);border:1px solid rgba(136,191,219,.24);font-size:13px;font-weight:700;color:#4d6f87}
.microsoftSolutionsPage .msHeroVisual{display:grid;gap:18px}
.microsoftSolutionsPage .msGlassPanel{border:1px solid rgba(137,191,218,.2);border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(246,250,253,.96));box-shadow:0 24px 56px rgba(42,97,127,.08);backdrop-filter:blur(16px)}
.microsoftSolutionsPage .msVisualMain{padding:26px;position:relative;overflow:hidden;min-height:280px}
.microsoftSolutionsPage .msVisualMain::before{content:"";position:absolute;inset:18px;border-radius:26px;background:linear-gradient(135deg,rgba(255,255,255,.4),rgba(255,255,255,.08) 42%,rgba(77,175,241,.08));border:1px solid rgba(255,255,255,.56)}
.microsoftSolutionsPage .msVisualHeader,.microsoftSolutionsPage .msVisualRail{position:relative;z-index:1}
.microsoftSolutionsPage .msVisualHeader{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:6px}
.microsoftSolutionsPage .msVisualHeader span{font-size:12px;letter-spacing:.18em;font-weight:800;color:#6d96b1}
.microsoftSolutionsPage .msVisualHeader strong{font-size:20px;color:#17344f}
.microsoftSolutionsPage .msSpotlight{position:relative;z-index:1;height:172px;margin:14px 0 8px}
.microsoftSolutionsPage .msSpotItem{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;opacity:0;transform:translateY(10px);animation:msSpotCycle 18s ease-in-out infinite;color:var(--sp)}
.microsoftSolutionsPage .msSpotItem svg{width:44px;height:44px;margin-bottom:14px}
.microsoftSolutionsPage .msSpotItem strong{display:block;font-size:24px;color:#17344f;margin-bottom:6px}
.microsoftSolutionsPage .msSpotItem small{display:block;color:#5e7d90;font-size:14px;max-width:340px;line-height:1.5}
.microsoftSolutionsPage .msSpotItem:nth-child(1){animation-delay:0s}
.microsoftSolutionsPage .msSpotItem:nth-child(2){animation-delay:3s}
.microsoftSolutionsPage .msSpotItem:nth-child(3){animation-delay:6s}
.microsoftSolutionsPage .msSpotItem:nth-child(4){animation-delay:9s}
.microsoftSolutionsPage .msSpotItem:nth-child(5){animation-delay:12s}
.microsoftSolutionsPage .msSpotItem:nth-child(6){animation-delay:15s}
@keyframes msSpotCycle{
0%,100%{opacity:0;transform:translateY(10px)}
2%{opacity:1;transform:translateY(0)}
14%{opacity:1;transform:translateY(0)}
16%{opacity:0;transform:translateY(-10px)}
}
.microsoftSolutionsPage .msVisualRail{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.microsoftSolutionsPage .msVisualGlow{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:34px}
.microsoftSolutionsPage .msVisualGlow:before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,rgba(255,154,61,.20),rgba(63,169,245,.20),rgba(91,196,106,.20),rgba(139,108,255,.20),rgba(255,154,61,.20));animation:msMeshSpin 26s linear infinite;filter:blur(40px)}
.microsoftSolutionsPage .msVisualGlow i{position:absolute;border-radius:50%;filter:blur(38px);opacity:.5}
.microsoftSolutionsPage .msGlowA{width:180px;height:180px;left:-30px;top:-20px;background:#ff9a3d;animation:msGlowDriftA 14s ease-in-out infinite}
.microsoftSolutionsPage .msGlowB{width:200px;height:200px;right:-40px;top:10px;background:#3fa9f5;animation:msGlowDriftB 17s ease-in-out infinite}
.microsoftSolutionsPage .msGlowC{width:160px;height:160px;left:30%;bottom:-50px;background:#5bc46a;animation:msGlowDriftC 12.5s ease-in-out infinite}
.microsoftSolutionsPage .msGlowD{width:150px;height:150px;right:15%;bottom:-30px;background:#ffce3d;animation:msGlowDriftD 19s ease-in-out infinite}
.microsoftSolutionsPage .msGlowE{width:130px;height:130px;left:46%;top:-40px;background:#8b6cff;animation:msGlowDriftA 16s ease-in-out infinite reverse}
@keyframes msMeshSpin{to{transform:rotate(360deg)}}
@keyframes msGlowDriftA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(22px,14px) scale(1.1)}66%{transform:translate(-10px,26px) scale(.95)}}
@keyframes msGlowDriftB{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-24px,10px) scale(1.05)}66%{transform:translate(-6px,-20px) scale(1.12)}}
@keyframes msGlowDriftC{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(18px,-14px) scale(1.08)}66%{transform:translate(30px,6px) scale(.96)}}
@keyframes msGlowDriftD{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-16px,-18px) scale(1.1)}66%{transform:translate(12px,-4px) scale(1)}}
.microsoftSolutionsPage .msVisualRail span{padding:10px 14px;border-radius:999px;font-size:13px;font-weight:800;color:#fff;box-shadow:0 8px 18px rgba(23,52,79,.14)}
.microsoftSolutionsPage .msVisualRail .msTagA{background:linear-gradient(135deg,#ff9a3d,#ff6f61)}
.microsoftSolutionsPage .msVisualRail .msTagB{background:linear-gradient(135deg,#3fa9f5,#3f7cf5)}
.microsoftSolutionsPage .msVisualRail .msTagC{background:linear-gradient(135deg,#8b6cff,#a978ff)}
.microsoftSolutionsPage .msVisualRail .msTagD{background:linear-gradient(135deg,#3f7cf5,#4dbdf4)}
.microsoftSolutionsPage .msVisualRail .msTagE{background:linear-gradient(135deg,#5bc46a,#3fd6b4)}
.microsoftSolutionsPage .msVisualRail .msTagF{background:linear-gradient(135deg,#ffce3d,#ff9a3d)}
.microsoftSolutionsPage .msTagRow span,.microsoftSolutionsPage .msMigrationTargets span,.microsoftSolutionsPage .msPackageList span,.microsoftSolutionsPage .msEcoFlow span{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid rgba(136,191,219,.24);font-size:13px;font-weight:700;color:#466b84}
.microsoftSolutionsPage .msBadgeCard{padding:22px 24px;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(246,250,253,.72));backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.55);box-shadow:0 24px 56px rgba(42,97,127,.10),inset 0 1px 0 rgba(255,255,255,.6)}
.microsoftSolutionsPage .msBadgeCard:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--ms-orange),var(--ms-green))}
.microsoftSolutionsPage .msBadgeIcon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,rgba(255,154,61,.16),rgba(91,196,106,.16));color:#c9803f;margin-bottom:10px}
.microsoftSolutionsPage .msBadgeIcon svg{width:22px;height:22px}
.microsoftSolutionsPage .msBadgeCard strong{display:block;margin:8px 0 6px;font-size:1.3rem;color:#17344f;font-family:Georgia,"Times New Roman",serif;font-style:italic;letter-spacing:.01em}
.microsoftSolutionsPage .msFeatureCard .msInfoIcon{display:flex}
.microsoftSolutionsPage .msSubnavWrap{position:sticky;top:76px;z-index:30;padding:0 0 12px;background:linear-gradient(180deg,rgba(243,249,253,.92),rgba(243,249,253,.46) 70%,rgba(243,249,253,0));backdrop-filter:blur(10px)}
.microsoftSolutionsPage .msSubnav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:12px 0}
.microsoftSolutionsPage .msSubnav a{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid rgba(136,191,219,.24);font-weight:700;color:#35536a;box-shadow:0 10px 22px rgba(47,101,131,.05);transition:.25s}
.microsoftSolutionsPage .msSubnav a:after{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--ms-blue),var(--ms-green));opacity:0;transform:scale(.4);transition:.25s}
.microsoftSolutionsPage .msSubnav a:hover{transform:translateY(-2px);text-decoration:none;border-color:rgba(100,170,205,.36);background:#fff;box-shadow:0 14px 28px rgba(47,101,131,.12)}
.microsoftSolutionsPage .msSubnav a:hover:after{opacity:1;transform:scale(1)}
.microsoftSolutionsPage .leftAligned{text-align:left}
.microsoftSolutionsPage .msPillarGrid,.microsoftSolutionsPage .msFeatureGrid,.microsoftSolutionsPage .msServiceGrid,.microsoftSolutionsPage .msAzureGrid{display:grid;gap:18px}
.microsoftSolutionsPage .msPillarGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.microsoftSolutionsPage .msFeatureGrid.twoUp,.microsoftSolutionsPage .msSplitIntro{grid-template-columns:repeat(2,minmax(0,1fr))}
.microsoftSolutionsPage .msServiceGrid.threeUp,.microsoftSolutionsPage .msAzureGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.microsoftSolutionsPage .msAzureGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.microsoftSolutionsPage .msPillarCard,.microsoftSolutionsPage .msFeatureCard,.microsoftSolutionsPage .msServiceCard,.microsoftSolutionsPage .msAzureCard,.microsoftSolutionsPage .msInfoCard,.microsoftSolutionsPage .msPackageBand,.microsoftSolutionsPage .msAudienceWrap{position:relative;border-radius:30px;border:1px solid var(--ms-border);background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(246,250,253,.98));box-shadow:0 20px 48px rgba(42,96,126,.07)}
.microsoftSolutionsPage .msPillarCard,.microsoftSolutionsPage .msFeatureCard,.microsoftSolutionsPage .msServiceCard,.microsoftSolutionsPage .msAzureCard{padding:26px}
.microsoftSolutionsPage .msServiceCard,.microsoftSolutionsPage .msAzureCard,.microsoftSolutionsPage .msFeatureCard{overflow:hidden}
.microsoftSolutionsPage .msServiceCard:before,.microsoftSolutionsPage .msAzureCard:before,.microsoftSolutionsPage .msFeatureCard:before{content:"";position:absolute;left:0;right:0;top:0;height:3px}
.microsoftSolutionsPage .msServiceGrid.threeUp>*:nth-child(3n+1):before,.microsoftSolutionsPage .msAzureGrid>*:nth-child(4n+1):before{background:linear-gradient(90deg,var(--ms-orange),#ff6f61)}
.microsoftSolutionsPage .msServiceGrid.threeUp>*:nth-child(3n+2):before,.microsoftSolutionsPage .msAzureGrid>*:nth-child(4n+2):before{background:linear-gradient(90deg,var(--ms-blue),var(--ms-indigo))}
.microsoftSolutionsPage .msServiceGrid.threeUp>*:nth-child(3n+3):before,.microsoftSolutionsPage .msAzureGrid>*:nth-child(4n+3):before{background:linear-gradient(90deg,var(--ms-green),#3fd6b4)}
.microsoftSolutionsPage .msAzureGrid>*:nth-child(4n+4):before{background:linear-gradient(90deg,var(--ms-violet),#a978ff)}
.microsoftSolutionsPage .msFeatureGrid.twoUp .msFeatureCard:nth-child(1):before{background:linear-gradient(90deg,var(--ms-orange),#ff6f61)}
.microsoftSolutionsPage .msFeatureGrid.twoUp .msFeatureCard:nth-child(2):before{background:linear-gradient(90deg,var(--ms-blue),var(--ms-indigo))}
.microsoftSolutionsPage .msPillarCard{transition:.3s ease}
.microsoftSolutionsPage .msPillarCard:hover{transform:translateY(-6px);box-shadow:0 26px 56px rgba(42,96,126,.14)}
.microsoftSolutionsPage .msPillarHead{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.microsoftSolutionsPage .msPillarHead h3{margin:0;line-height:1.2;display:flex;align-items:center}
.microsoftSolutionsPage .msPillarCard span{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:15px;color:#fff;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -8px 14px rgba(255,255,255,.12),0 8px 18px rgba(42,96,126,.14)}
.microsoftSolutionsPage .msPillarCard span:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0) 55%)}
.microsoftSolutionsPage .msPillarCard span svg{width:24px;height:24px;position:relative;z-index:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.08))}
.microsoftSolutionsPage .msPillarCard:hover span{transform:scale(1.12) rotate(-6deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -8px 14px rgba(255,255,255,.16),0 14px 24px rgba(42,96,126,.24)}
.microsoftSolutionsPage .msPillarCard:nth-child(1) span{background:linear-gradient(135deg,rgba(255,160,80,.88),rgba(255,128,105,.82))}
.microsoftSolutionsPage .msPillarCard:nth-child(2) span{background:linear-gradient(135deg,rgba(90,180,250,.88),rgba(90,145,250,.82))}
.microsoftSolutionsPage .msPillarCard:nth-child(3) span{background:linear-gradient(135deg,rgba(157,132,255,.88),rgba(178,145,255,.82))}
.microsoftSolutionsPage .msPillarCard:nth-child(4) span{background:linear-gradient(135deg,rgba(96,205,128,.88),rgba(86,218,184,.82))}
.microsoftSolutionsPage .msPillarCard:nth-child(5) span{background:linear-gradient(135deg,rgba(255,125,163,.88),rgba(255,160,80,.82))}
.microsoftSolutionsPage .msPillarCard:nth-child(6) span{background:linear-gradient(135deg,rgba(255,209,80,.88),rgba(255,183,80,.82))}
.microsoftSolutionsPage .msPillarCard h3,.microsoftSolutionsPage .msFeatureCard h3,.microsoftSolutionsPage .msServiceCard h3,.microsoftSolutionsPage .msAzureCard h3,.microsoftSolutionsPage .msAudienceWrap h3{margin:0 0 10px;font-size:1.28rem;color:#17344f}
.microsoftSolutionsPage .eyebrow{display:inline-block;margin-bottom:10px;color:#6690aa;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.microsoftSolutionsPage .msSplitIntro{display:grid;gap:18px;margin-bottom:18px;align-items:start}
.microsoftSolutionsPage .msInfoStack{display:grid;gap:16px}
.microsoftSolutionsPage .msInfoCard{padding:24px 26px;overflow:hidden}
.microsoftSolutionsPage .msInfoIcon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;color:#fff;margin-bottom:14px;border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 18px rgba(42,96,126,.14)}
.microsoftSolutionsPage .msInfoIcon svg{width:22px;height:22px}
.microsoftSolutionsPage .msInfoCardA{border-top:3px solid transparent}
.microsoftSolutionsPage .msInfoCardA:before,.microsoftSolutionsPage .msInfoCardB:before{content:"";position:absolute;left:0;right:0;top:0;height:3px}
.microsoftSolutionsPage .msInfoCardA:before{background:linear-gradient(90deg,var(--ms-blue),var(--ms-indigo))}
.microsoftSolutionsPage .msInfoCardB:before{background:linear-gradient(90deg,var(--ms-orange),#ffce3d)}
.microsoftSolutionsPage .msInfoCardA .msInfoIcon{background:linear-gradient(135deg,rgba(90,145,250,.9),rgba(139,108,255,.85))}
.microsoftSolutionsPage .msInfoCardB .msInfoIcon{background:linear-gradient(135deg,rgba(255,171,61,.9),rgba(255,206,61,.85))}
.microsoftSolutionsPage #ms365 .msFeatureGrid.twoUp .msFeatureCardA .msInfoIcon{background:linear-gradient(135deg,rgba(255,171,61,.9),rgba(255,142,124,.85))}
.microsoftSolutionsPage #ms365 .msFeatureGrid.twoUp .msFeatureCardB .msInfoIcon{background:linear-gradient(135deg,rgba(90,145,250,.9),rgba(139,108,255,.85))}
.microsoftSolutionsPage #security .msFeatureGrid.twoUp .msFeatureCardA .msInfoIcon{background:linear-gradient(135deg,rgba(63,214,180,.9),rgba(63,169,245,.85))}
.microsoftSolutionsPage #security .msFeatureGrid.twoUp .msFeatureCardB .msInfoIcon{background:linear-gradient(135deg,rgba(255,111,156,.9),rgba(255,171,61,.85))}
.microsoftSolutionsPage .msInfoCard strong{display:block;margin-bottom:8px;color:#17344f;font-size:1.03rem}
.microsoftSolutionsPage .msFeatureCard{position:relative;overflow:hidden}
.microsoftSolutionsPage .msFeatureIcon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;color:#fff;margin-bottom:14px;border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 18px rgba(42,96,126,.14)}
.microsoftSolutionsPage .msFeatureIcon svg{width:23px;height:23px}
.microsoftSolutionsPage .msFeatureCardA:before,.microsoftSolutionsPage .msFeatureCardB:before{content:"";position:absolute;left:0;right:0;top:0;height:3px}
.microsoftSolutionsPage .msFeatureCardA:before{background:linear-gradient(90deg,var(--ms-orange),#ff6f61)}
.microsoftSolutionsPage .msFeatureCardB:before{background:linear-gradient(90deg,var(--ms-blue),var(--ms-indigo))}
.microsoftSolutionsPage .msFeatureCardA .msFeatureIcon{background:linear-gradient(135deg,rgba(255,171,61,.9),rgba(255,142,124,.85))}
.microsoftSolutionsPage .msFeatureCardB .msFeatureIcon{background:linear-gradient(135deg,rgba(90,145,250,.9),rgba(90,181,250,.85))}
.microsoftSolutionsPage .msFeatureCard ul,.microsoftSolutionsPage .msAzureCard ul{padding-left:0;margin:14px 0 0;list-style:none}
.microsoftSolutionsPage .msFeatureCard li,.microsoftSolutionsPage .msAzureCard li{margin:9px 0;color:#3c5b70;padding-left:28px;position:relative}
.microsoftSolutionsPage .msFeatureCard li:before,.microsoftSolutionsPage .msAzureCard li:before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--ms-blue),var(--ms-green))}
.microsoftSolutionsPage .msFeatureCard li:after,.microsoftSolutionsPage .msAzureCard li:after{content:"";position:absolute;left:4px;top:6px;width:10px;height:7px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.microsoftSolutionsPage .msFeatureCardA li:before{background:linear-gradient(135deg,var(--ms-orange),#ff6f61)}
.microsoftSolutionsPage .msFeatureCardB li:before{background:linear-gradient(135deg,var(--ms-blue),var(--ms-indigo))}
.microsoftSolutionsPage .msTagRow,.microsoftSolutionsPage .msMigrationTargets,.microsoftSolutionsPage .msPackageList{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.microsoftSolutionsPage .msFlowBand{max-width:1200px;margin:36px auto 0;overflow:hidden}
.microsoftSolutionsPage .msFlowLine{animation:msFlowMove 3s linear infinite}
@keyframes msFlowMove{to{stroke-dashoffset:-24}}
.microsoftSolutionsPage .msFlowNode{filter:drop-shadow(0 8px 16px rgba(42,96,126,.18));animation:msFlowBob 4s ease-in-out infinite}
.microsoftSolutionsPage .msFlowNode:nth-child(3n){animation-duration:4.6s}
.microsoftSolutionsPage .msFlowNode:nth-child(3n+1){animation-duration:5.2s;animation-delay:-1s}
.microsoftSolutionsPage .msFlowNode:nth-child(2n){animation-direction:reverse}
@keyframes msFlowBob{0%,100%{transform:translate(var(--tx,0),var(--ty,0)) scale(1)}50%{transform:translate(var(--tx,0),calc(var(--ty,0) - 5px)) scale(1.05)}}
.microsoftSolutionsPage .msPackageListIcons .pkgChip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 10px;border-radius:999px;background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 16%,#fff),#fff);border:1px solid color-mix(in srgb,var(--pc) 35%,transparent);color:#2c4457;font-size:13px;font-weight:800;box-shadow:0 6px 16px color-mix(in srgb,var(--pc) 18%,transparent)}
.microsoftSolutionsPage .msPackageListIcons .pkgChip svg{width:20px;height:20px;color:var(--pc);flex:0 0 auto}
.microsoftSolutionsPage .msProcessRail{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;margin-top:28px;position:relative}
.microsoftSolutionsPage .msProcessRail::before{content:"";position:absolute;left:4%;right:4%;top:26px;height:2px;background:linear-gradient(90deg,var(--ms-orange),var(--ms-blue),var(--ms-green));opacity:.34}
.microsoftSolutionsPage .msProcessRail article{position:relative;padding:18px 16px 18px;border-radius:26px;border:1px solid var(--ms-border);background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(247,251,255,.98));box-shadow:0 18px 44px rgba(45,99,129,.06)}
.microsoftSolutionsPage .msProcessRail article span{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:16px;background:linear-gradient(135deg,rgba(255,182,94,.32),rgba(94,134,255,.18));font-size:15px;font-weight:900;color:#2d5a75;margin-bottom:12px}
.microsoftSolutionsPage .msProcessRail article strong{display:block;margin-bottom:8px;font-size:1rem;color:#17344f}
.microsoftSolutionsPage .msProcessRail article p{overflow-wrap:break-word}
/* Migration target pills: slow left-right drift from center */
.microsoftSolutionsPage .msMigrationTargets{justify-content:center}
.microsoftSolutionsPage .msTargetsDrift{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,black 3%,black 97%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,black 3%,black 97%,transparent 100%)}
.microsoftSolutionsPage .msTargetsDrift span{animation:msTargetsSway 9s ease-in-out infinite}
.microsoftSolutionsPage .msTargetsDrift span:nth-child(2n){animation-duration:11s;animation-direction:reverse}
.microsoftSolutionsPage .msTargetsDrift span:nth-child(3n){animation-duration:7.5s}
@keyframes msTargetsSway{0%,100%{transform:translateX(0)}50%{transform:translateX(14px)}}
/* Migration steps: hand-drawn scroll-map illustration with labels placed directly on it */
.microsoftSolutionsPage .msMapWrap{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-top:28px}
.microsoftSolutionsPage .msMapScroll{position:relative;width:100%;min-width:960px;aspect-ratio:1400/520}
.microsoftSolutionsPage .msMapArt{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 20px 40px rgba(120,85,35,.18))}
.microsoftSolutionsPage .msMapPoint{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-17px);width:168px;text-align:center;display:flex;flex-direction:column;align-items:center}
.microsoftSolutionsPage .msMapNum{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7e8,#e0a95c 65%,#a9642f 100%);border:2px solid #8a5a2c;color:#4a2e10;font-weight:900;font-size:14px;box-shadow:0 8px 14px rgba(80,50,10,.35);margin-bottom:10px}
.microsoftSolutionsPage .msMapPoint strong{display:block;color:#3c2a12;font-family:"Arial Black",Arial,sans-serif;font-size:15px;text-transform:uppercase;letter-spacing:.05em;font-weight:900;margin-bottom:4px;filter:drop-shadow(0 4px 5px rgba(70,45,10,.3))}
.microsoftSolutionsPage .msMapPoint p{margin:0;color:#5a3d1c;font-size:11.5px;line-height:1.4;font-weight:600;filter:drop-shadow(0 2px 3px rgba(70,45,10,.18))}
.microsoftSolutionsPage .msMapLabel{background:radial-gradient(ellipse at center,rgba(250,242,222,.92) 55%,rgba(250,242,222,0) 100%);border-radius:14px;padding:3px 10px 6px}
@media(max-width:760px){
.microsoftSolutionsPage .msMapScroll{min-width:820px}
}
.microsoftSolutionsPage .msWorkplaceBand{justify-content:center}
.microsoftSolutionsPage .msAudienceWrap{padding:24px 26px;display:grid;grid-template-columns:280px 1fr;gap:22px;align-items:start;margin-top:22px}
.microsoftSolutionsPage .msAudienceGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.microsoftSolutionsPage .msAudienceGrid span{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(246,250,253,.96));border:1px solid var(--ms-border);font-size:13px;font-weight:700;color:#35536a}
.microsoftSolutionsPage .msAudienceGrid span b{flex:1;min-width:0;overflow-wrap:break-word;font-weight:700}
.microsoftSolutionsPage .msAudienceGrid svg{width:22px;height:22px;flex:0 0 auto;border-radius:9px;padding:4px;color:#fff}
.microsoftSolutionsPage .msAudienceGrid span:nth-child(9n+1) svg{background:linear-gradient(135deg,#ff9a3d,#ff6f61)}
.microsoftSolutionsPage .msAudienceGrid span:nth-child(9n+2) svg{background:linear-gradient(135deg,#3fa9f5,#3f7cf5)}
.microsoftSolutionsPage .msAudienceGrid span:nth-child(9n+3) svg{background:linear-gradient(135deg,#8b6cff,#a978ff)}
.microsoftSolutionsPage .msAudienceGrid span:nth-child(9n+4) svg{background:linear-gradient(135deg,#5bc46a,#3fd6b4)}
.microsoftSolutionsPage .msAudienceGrid span:nth-child(9n+5) svg{background:linear-gradient(135deg,#ff6f9c,#ff9a3d)}
.microsoftSolutionsPage .msAudienceGrid span:nth-child(9n+6) svg{background:linear-gradient(135deg,#ffce3d,#ffa93d)}
.microsoftSolutionsPage .msAudienceGrid span:nth-child(9n+7) svg{background:linear-gradient(135deg,#3fd6b4,#3fa9f5)}
.microsoftSolutionsPage .msAudienceGrid span:nth-child(9n+8) svg{background:linear-gradient(135deg,#a978ff,#ff6f9c)}
.microsoftSolutionsPage .msAudienceGrid span:nth-child(9n+9) svg{background:linear-gradient(135deg,#3f7cf5,#5bc46a)}
@media(max-width:760px){.microsoftSolutionsPage .msAudienceGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.microsoftSolutionsPage .msPackageBand{padding:30px 32px;display:grid;gap:18px;overflow:hidden}
.microsoftSolutionsPage .msPackageBand::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:4px;background:linear-gradient(90deg,var(--ms-orange),var(--ms-blue),var(--ms-green))}
.microsoftSolutionsPage .msEcoFlow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:10px 0 30px}
.microsoftSolutionsPage .msEcoPuzzle{gap:0;flex-wrap:wrap;row-gap:14px}
.microsoftSolutionsPage .msEcoPuzzle span{position:relative;padding:13px 20px;font-size:13px;font-weight:800;color:#fff;margin-right:14px;box-shadow:0 10px 22px rgba(42,96,126,.14)}
.microsoftSolutionsPage .msEcoPuzzle span:last-child{margin-right:0}
.microsoftSolutionsPage .msEcoPuzzle span:before{content:"";position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:inherit;box-shadow:inset 0 0 0 3px rgba(255,255,255,.35)}
.microsoftSolutionsPage .msEcoPuzzle span:last-child:before{display:none}
.microsoftSolutionsPage .msEcoPuzzle span:nth-child(9n+1){background:linear-gradient(135deg,#ff9a3d,#ff6f61);border-radius:16px 8px 8px 16px}
.microsoftSolutionsPage .msEcoPuzzle span:nth-child(9n+2){background:linear-gradient(135deg,#3fa9f5,#3f7cf5);border-radius:8px}
.microsoftSolutionsPage .msEcoPuzzle span:nth-child(9n+3){background:linear-gradient(135deg,#8b6cff,#a978ff);border-radius:8px}
.microsoftSolutionsPage .msEcoPuzzle span:nth-child(9n+4){background:linear-gradient(135deg,#5bc46a,#3fd6b4);border-radius:8px}
.microsoftSolutionsPage .msEcoPuzzle span:nth-child(9n+5){background:linear-gradient(135deg,#ff6f9c,#ff9a3d);border-radius:8px}
.microsoftSolutionsPage .msEcoPuzzle span:nth-child(9n+6){background:linear-gradient(135deg,#ffce3d,#ffa93d);border-radius:8px}
.microsoftSolutionsPage .msEcoPuzzle span:nth-child(9n+7){background:linear-gradient(135deg,#3fd6b4,#3fa9f5);border-radius:8px}
.microsoftSolutionsPage .msEcoPuzzle span:nth-child(9n+8){background:linear-gradient(135deg,#a978ff,#ff6f9c);border-radius:8px}
.microsoftSolutionsPage .msEcoPuzzle span:nth-child(9n+9){background:linear-gradient(135deg,#3f7cf5,#5bc46a);border-radius:8px 16px 16px 8px}
.microsoftSolutionsPage .msEcoFlow b{color:#8bb9d4;font-size:18px}
.microsoftSolutionsPage .msFinalCta{margin-top:4px}
@media (max-width:1160px){
.microsoftSolutionsPage .msProcessRail{grid-template-columns:repeat(4,minmax(0,1fr))}
.microsoftSolutionsPage .msPillarGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
.microsoftHomeInner,.microsoftSolutionsPage .msHeroGrid,.microsoftSolutionsPage .msSplitIntro,.microsoftSolutionsPage .msFeatureGrid.twoUp,.microsoftSolutionsPage .msAudienceWrap{grid-template-columns:1fr}
.microsoftSolutionsPage .msServiceGrid.threeUp,.microsoftSolutionsPage .msAzureGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.microsoftSolutionsPage .msSubnavWrap{position:relative;top:auto;background:none;backdrop-filter:none;padding-bottom:0}
}
@media (max-width:760px){
.microsoftHomeTiles,.microsoftSolutionsPage .msVisualTiles,.microsoftSolutionsPage .msPillarGrid,.microsoftSolutionsPage .msServiceGrid.threeUp,.microsoftSolutionsPage .msAzureGrid,.microsoftSolutionsPage .msProcessRail{grid-template-columns:1fr}
.microsoftHomeBoard,.microsoftSolutionsPage .msVisualMain,.microsoftSolutionsPage .msPillarCard,.microsoftSolutionsPage .msFeatureCard,.microsoftSolutionsPage .msServiceCard,.microsoftSolutionsPage .msAzureCard,.microsoftSolutionsPage .msPackageBand{padding:22px}
.microsoftSolutionsPage .msHero{padding-top:36px}
.microsoftSolutionsPage .msHeroCopy h1{font-size:clamp(2.3rem,9vw,3.6rem)}
.microsoftSolutionsPage .msSubnav{overflow:auto;flex-wrap:nowrap;padding-bottom:6px}
.microsoftSolutionsPage .msSubnav a{white-space:nowrap}
}
/* =========================
V57 – Apple rotating screens: wider rectangular 3D prism
========================= */
/* Home Apple feature: wide "screen inside a screen" */
body.homePage .appleHomeVisual.appleCubeVisual{
min-height:420px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:hidden !important;
border-radius:34px !important;
background:
radial-gradient(circle at 50% 42%,rgba(255,255,255,.96),rgba(241,249,254,.88) 56%,rgba(229,244,252,.82) 100%) !important;
border:1px solid rgba(102,189,221,.18) !important;
box-shadow:0 24px 56px rgba(54,126,160,.09), inset 0 1px 0 rgba(255,255,255,.94) !important;
}
body.homePage .appleHomeVisual.appleCubeVisual::before{
content:"";
position:absolute;
inset:26px;
border-radius:27px;
border:1px solid rgba(255,255,255,.72);
background:linear-gradient(145deg,rgba(255,255,255,.48),rgba(226,245,253,.16));
pointer-events:none;
}
body.homePage .appleHomeCubeStage{
inset:0 !important;
transform:none !important;
perspective:1900px !important;
perspective-origin:50% 50% !important;
}
body.homePage .appleHomeCube.appleTrueCube{
width:min(78%,520px) !important;
height:285px !important;
min-width:0 !important;
min-height:285px !important;
max-width:520px !important;
max-height:285px !important;
margin:auto !important;
transform-style:preserve-3d !important;
}
body.homePage .appleHomeCubeFace{
width:100% !important;
height:100% !important;
border-radius:24px !important;
overflow:hidden !important;
background:#f7fbfe !important;
border:1px solid rgba(255,255,255,.78) !important;
box-shadow:0 18px 42px rgba(40,91,120,.10) !important;
}
/* Apple Business hero: larger rectangular prism, centered higher */
body.appleBusinessPage .abHeroVisual{
min-height:500px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:hidden !important;
border-radius:36px !important;
background:
radial-gradient(circle at 50% 42%,rgba(255,255,255,.98),rgba(240,249,254,.90) 58%,rgba(228,244,252,.84) 100%) !important;
border:1px solid rgba(102,189,221,.18) !important;
box-shadow:0 28px 66px rgba(54,126,160,.10), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
body.appleBusinessPage .abHeroVisual::before{
content:"";
position:absolute;
inset:28px;
border-radius:28px;
background:linear-gradient(145deg,rgba(255,255,255,.52),rgba(229,246,253,.14));
border:1px solid rgba(255,255,255,.76);
pointer-events:none;
}
body.appleBusinessPage .abHeroVisual::after{display:none !important;content:none !important;}
body.appleBusinessPage .abHeroCubeStage{
inset:0 !important;
transform:translateY(-4px) !important;
perspective:2300px !important;
perspective-origin:50% 48% !important;
}
body.appleBusinessPage .abHeroCube.appleTrueCube{
width:min(82%,640px) !important;
height:350px !important;
min-width:0 !important;
min-height:350px !important;
max-width:640px !important;
max-height:350px !important;
margin:auto !important;
transform-style:preserve-3d !important;
}
body.appleBusinessPage .abHeroCubeFace{
width:100% !important;
height:100% !important;
border-radius:26px !important;
overflow:hidden !important;
background:#f7fbfe !important;
border:1px solid rgba(255,255,255,.78) !important;
box-shadow:0 20px 48px rgba(38,88,116,.11) !important;
}
body.homePage .appleHomeCubeFace img,
body.appleBusinessPage .abHeroCubeFace img{
width:100% !important;
height:100% !important;
display:block !important;
object-fit:cover !important;
object-position:center !important;
}
/* Remove residual old decorative blotches around the Apple hero */
body.appleBusinessPage .abHero::after{
display:none !important;
content:none !important;
}
body.appleBusinessPage .abHero::before{
width:310px !important;
height:310px !important;
right:5% !important;
top:8% !important;
left:auto !important;
bottom:auto !important;
opacity:.22 !important;
filter:blur(64px) !important;
background:radial-gradient(circle,rgba(84,202,239,.16),rgba(84,202,239,0) 72%) !important;
}
@media(max-width:1100px){
body.homePage .appleHomeVisual.appleCubeVisual{min-height:370px !important}
body.homePage .appleHomeCube.appleTrueCube{width:min(82%,460px) !important;height:250px !important;min-height:250px !important;max-height:250px !important}
body.appleBusinessPage .abHeroVisual{min-height:440px !important}
body.appleBusinessPage .abHeroCube.appleTrueCube{width:min(84%,560px) !important;height:305px !important;min-height:305px !important;max-height:305px !important}
}
@media(max-width:760px){
body.homePage .appleHomeVisual.appleCubeVisual{min-height:300px !important}
body.homePage .appleHomeVisual.appleCubeVisual::before{inset:16px;border-radius:22px}
body.homePage .appleHomeCube.appleTrueCube{width:min(86%,350px) !important;height:195px !important;min-height:195px !important;max-height:195px !important}
body.homePage .appleHomeCubeFace{border-radius:18px !important}
body.appleBusinessPage .abHeroVisual{min-height:340px !important}
body.appleBusinessPage .abHeroVisual::before{inset:18px;border-radius:22px}
body.appleBusinessPage .abHeroCube.appleTrueCube{width:min(88%,390px) !important;height:220px !important;min-height:220px !important;max-height:220px !important}
body.appleBusinessPage .abHeroCubeFace{border-radius:19px !important}
}
/* =========================
V58 – Apple rotating screen proportions + tighter glass framing
========================= */
/* HOME: less nested glass, more direct "screen in screen" composition */
body.homePage .appleHomeFeatureInner{
gap:34px !important;
}
body.homePage .appleHomeVisual.appleCubeVisual{
min-height:350px !important;
padding:18px !important;
border-radius:30px !important;
background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(239,249,254,.90)) !important;
border:1px solid rgba(102,189,221,.16) !important;
box-shadow:0 20px 46px rgba(54,126,160,.08) !important;
}
body.homePage .appleHomeVisual.appleCubeVisual::before{
display:none !important;
content:none !important;
}
body.homePage .appleHomeVisual.appleCubeVisual::after{
content:"" !important;
display:block !important;
position:absolute !important;
inset:14px !important;
border-radius:23px !important;
border:1px solid rgba(113,193,224,.13) !important;
background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(232,246,252,.08)) !important;
pointer-events:none !important;
}
body.homePage .appleHomeCubeStage{
inset:18px !important;
perspective:1800px !important;
}
body.homePage .appleHomeCube.appleTrueCube{
width:min(72%,460px) !important;
max-width:460px !important;
height:260px !important;
min-height:260px !important;
max-height:260px !important;
--apple-cube-depth:118px !important;
}
body.homePage .appleHomeCubeFace{
border-radius:21px !important;
box-shadow:0 16px 34px rgba(40,91,120,.09) !important;
}
/* APPLE PAGE: less stretched, closer to a balanced widescreen prism */
body.appleBusinessPage .abHeroVisual{
min-height:455px !important;
padding:18px !important;
border-radius:34px !important;
background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(238,249,254,.92)) !important;
border:1px solid rgba(102,189,221,.16) !important;
box-shadow:0 24px 54px rgba(54,126,160,.09) !important;
}
body.appleBusinessPage .abHeroVisual::before{
display:none !important;
content:none !important;
}
body.appleBusinessPage .abHeroVisual::after{
content:"" !important;
display:block !important;
position:absolute !important;
inset:16px !important;
border-radius:26px !important;
border:1px solid rgba(111,194,224,.12) !important;
background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(227,245,252,.08)) !important;
pointer-events:none !important;
}
body.appleBusinessPage .abHeroCubeStage{
inset:22px !important;
transform:translateY(-3px) !important;
perspective:2100px !important;
}
body.appleBusinessPage .abHeroCube.appleTrueCube{
width:min(74%,560px) !important;
max-width:560px !important;
height:320px !important;
min-height:320px !important;
max-height:320px !important;
--apple-cube-depth:145px !important;
}
body.appleBusinessPage .abHeroCubeFace{
border-radius:23px !important;
box-shadow:0 18px 40px rgba(38,88,116,.10) !important;
}
/* Small information label so it never dominates the image */
body.appleBusinessPage .abHeroGlass{
left:22px !important;
bottom:20px !important;
width:auto !important;
max-width:66% !important;
padding:11px 14px !important;
border-radius:16px !important;
background:rgba(255,255,255,.78) !important;
border:1px solid rgba(104,194,226,.22) !important;
box-shadow:0 10px 26px rgba(57,136,172,.09) !important;
backdrop-filter:blur(14px) !important;
}
body.appleBusinessPage .abHeroGlass span{
font-size:9px !important;
letter-spacing:.10em !important;
}
body.appleBusinessPage .abHeroGlass strong{
margin-top:4px !important;
font-size:14px !important;
line-height:1.22 !important;
}
@media(max-width:1100px){
body.homePage .appleHomeVisual.appleCubeVisual{min-height:320px !important}
body.homePage .appleHomeCube.appleTrueCube{
width:min(76%,410px) !important;
height:230px !important;
min-height:230px !important;
max-height:230px !important;
--apple-cube-depth:104px !important;
}
body.appleBusinessPage .abHeroVisual{min-height:405px !important}
body.appleBusinessPage .abHeroCube.appleTrueCube{
width:min(78%,500px) !important;
height:285px !important;
min-height:285px !important;
max-height:285px !important;
--apple-cube-depth:130px !important;
}
}
@media(max-width:760px){
body.homePage .appleHomeFeatureInner{gap:22px !important}
body.homePage .appleHomeVisual.appleCubeVisual{
min-height:245px !important;
padding:12px !important;
border-radius:24px !important;
}
body.homePage .appleHomeVisual.appleCubeVisual::after{
inset:10px !important;
border-radius:19px !important;
}
body.homePage .appleHomeCubeStage{inset:12px !important}
body.homePage .appleHomeCube.appleTrueCube{
width:min(84%,300px) !important;
height:170px !important;
min-height:170px !important;
max-height:170px !important;
--apple-cube-depth:76px !important;
}
body.homePage .appleHomeCubeFace{border-radius:16px !important}
body.appleBusinessPage .abHeroVisual{
min-height:285px !important;
padding:12px !important;
border-radius:25px !important;
}
body.appleBusinessPage .abHeroVisual::after{
inset:10px !important;
border-radius:20px !important;
}
body.appleBusinessPage .abHeroCubeStage{
inset:14px !important;
transform:none !important;
}
body.appleBusinessPage .abHeroCube.appleTrueCube{
width:min(84%,315px) !important;
height:180px !important;
min-height:180px !important;
max-height:180px !important;
--apple-cube-depth:80px !important;
}
body.appleBusinessPage .abHeroCubeFace{border-radius:17px !important}
body.appleBusinessPage .abHeroGlass{
left:14px !important;
bottom:13px !important;
max-width:58% !important;
padding:7px 9px !important;
border-radius:12px !important;
background:rgba(255,255,255,.82) !important;
}
body.appleBusinessPage .abHeroGlass span{
font-size:7px !important;
letter-spacing:.08em !important;
}
body.appleBusinessPage .abHeroGlass strong{
margin-top:2px !important;
font-size:10px !important;
line-height:1.16 !important;
}
}
@media(max-width:430px){
body.homePage .appleHomeCube.appleTrueCube{
width:min(88%,270px) !important;
height:154px !important;
min-height:154px !important;
max-height:154px !important;
--apple-cube-depth:69px !important;
}
body.appleBusinessPage .abHeroVisual{min-height:250px !important}
body.appleBusinessPage .abHeroCube.appleTrueCube{
width:min(86%,280px) !important;
height:160px !important;
min-height:160px !important;
max-height:160px !important;
--apple-cube-depth:72px !important;
}
body.appleBusinessPage .abHeroGlass{
max-width:52% !important;
left:12px !important;
bottom:11px !important;
}
body.appleBusinessPage .abHeroGlass span{display:none !important}
body.appleBusinessPage .abHeroGlass strong{
font-size:9px !important;
margin-top:0 !important;
}
}
/* =========================
V59 – mobile cleanup for Apple hero + tighter proportions
========================= */
/* Slightly slimmer desktop composition on Apple page */
body.appleBusinessPage .abHeroVisual{
min-height:430px !important;
padding:16px !important;
border-radius:32px !important;
}
body.appleBusinessPage .abHeroVisual::after{
inset:14px !important;
border-radius:24px !important;
}
body.appleBusinessPage .abHeroCubeStage{
inset:18px !important;
}
body.appleBusinessPage .abHeroCube.appleTrueCube{
width:min(70%,520px) !important;
max-width:520px !important;
height:292px !important;
min-height:292px !important;
max-height:292px !important;
--apple-cube-depth:132px !important;
}
body.appleBusinessPage .abHeroCubeFace{
border-radius:22px !important;
}
body.appleBusinessPage .abHeroGlass{
left:18px !important;
right:auto !important;
bottom:16px !important;
max-width:52% !important;
padding:10px 12px !important;
}
body.appleBusinessPage .abHeroGlass strong{
font-size:13px !important;
line-height:1.18 !important;
}
/* Home page: cleaner glass block, less bulky */
body.homePage .appleHomeVisual.appleCubeVisual{
min-height:330px !important;
padding:14px !important;
border-radius:28px !important;
}
body.homePage .appleHomeVisual.appleCubeVisual::after{
inset:12px !important;
border-radius:21px !important;
}
body.homePage .appleHomeCubeStage{
inset:14px !important;
}
body.homePage .appleHomeCube.appleTrueCube{
width:min(70%,430px) !important;
max-width:430px !important;
height:238px !important;
min-height:238px !important;
max-height:238px !important;
--apple-cube-depth:108px !important;
}
/* Tablet */
@media(max-width:980px){
body.appleBusinessPage .abHeroVisual{
min-height:380px !important;
}
body.appleBusinessPage .abHeroCube.appleTrueCube{
width:min(76%,450px) !important;
height:250px !important;
min-height:250px !important;
max-height:250px !important;
--apple-cube-depth:116px !important;
}
body.appleBusinessPage .abHeroGlass{
max-width:48% !important;
padding:8px 10px !important;
}
body.appleBusinessPage .abHeroGlass strong{
font-size:11px !important;
}
body.homePage .appleHomeVisual.appleCubeVisual{
min-height:290px !important;
}
body.homePage .appleHomeCube.appleTrueCube{
width:min(76%,360px) !important;
height:200px !important;
min-height:200px !important;
max-height:200px !important;
--apple-cube-depth:90px !important;
}
}
/* Mobile cleanup: screen should be clearly slimmer and the text badge should never dominate */
@media(max-width:760px){
body.appleBusinessPage .abHeroVisual{
min-height:248px !important;
padding:10px !important;
border-radius:22px !important;
}
body.appleBusinessPage .abHeroVisual::after{
inset:8px !important;
border-radius:16px !important;
}
body.appleBusinessPage .abHeroCubeStage{
inset:10px !important;
}
body.appleBusinessPage .abHeroCube.appleTrueCube{
width:min(78%,252px) !important;
height:146px !important;
min-height:146px !important;
max-height:146px !important;
--apple-cube-depth:62px !important;
}
body.appleBusinessPage .abHeroCubeFace{
border-radius:14px !important;
}
body.appleBusinessPage .abHeroGlass{
left:10px !important;
bottom:10px !important;
max-width:44% !important;
padding:6px 8px !important;
border-radius:10px !important;
}
body.appleBusinessPage .abHeroGlass span{
display:none !important;
}
body.appleBusinessPage .abHeroGlass strong{
margin-top:0 !important;
font-size:8px !important;
line-height:1.15 !important;
}
body.homePage .appleHomeVisual.appleCubeVisual{
min-height:228px !important;
padding:10px !important;
border-radius:21px !important;
}
body.homePage .appleHomeVisual.appleCubeVisual::after{
inset:8px !important;
border-radius:16px !important;
}
body.homePage .appleHomeCubeStage{
inset:10px !important;
}
body.homePage .appleHomeCube.appleTrueCube{
width:min(80%,256px) !important;
height:144px !important;
min-height:144px !important;
max-height:144px !important;
--apple-cube-depth:64px !important;
}
body.homePage .appleHomeCubeFace{
border-radius:14px !important;
}
}
@media(max-width:430px){
body.appleBusinessPage .abHeroVisual{
min-height:230px !important;
}
body.appleBusinessPage .abHeroCube.appleTrueCube{
width:min(76%,224px) !important;
height:130px !important;
min-height:130px !important;
max-height:130px !important;
--apple-cube-depth:54px !important;
}
body.appleBusinessPage .abHeroGlass{
max-width:41% !important;
left:8px !important;
bottom:8px !important;
padding:5px 7px !important;
}
body.appleBusinessPage .abHeroGlass strong{
font-size:7px !important;
line-height:1.1 !important;
}
body.homePage .appleHomeVisual.appleCubeVisual{
min-height:214px !important;
}
body.homePage .appleHomeCube.appleTrueCube{
width:min(78%,228px) !important;
height:128px !important;
min-height:128px !important;
max-height:128px !important;
--apple-cube-depth:56px !important;
}
}
/* =========================
V60 – cleaner cube, single blue panel, no extra inner windows
========================= */
/* HOME: keep only one clean blue glass panel */
body.homePage .appleHomeVisual.appleCubeVisual{
min-height:318px !important;
height:318px !important;
padding:0 !important;
border-radius:28px !important;
background:linear-gradient(135deg,#f5fbfe 0%,#eaf7fd 52%,#ddf2fb 100%) !important;
border:1px solid rgba(123,200,228,.24) !important;
box-shadow:0 18px 44px rgba(54,126,160,.08) !important;
}
body.homePage .appleHomeVisual.appleCubeVisual::before,
body.homePage .appleHomeVisual.appleCubeVisual::after{
display:none !important;
content:none !important;
}
body.homePage .appleHomeCubeStage{
inset:0 !important;
transform:none !important;
perspective:1650px !important;
perspective-origin:50% 50% !important;
}
body.homePage .appleHomeCube.appleTrueCube{
width:min(66%,400px) !important;
max-width:400px !important;
height:220px !important;
min-height:220px !important;
max-height:220px !important;
--apple-cube-depth:96px !important;
transform:rotateX(-2deg) rotateY(0deg) !important;
}
body.homePage .appleHomeCubeFace{
border-radius:20px !important;
box-shadow:0 16px 34px rgba(40,91,120,.10) !important;
}
/* APPLE PAGE: one outer panel only, no nested rectangles */
body.appleBusinessPage .abHeroVisual{
min-height:400px !important;
padding:0 !important;
border-radius:30px !important;
background:linear-gradient(135deg,#f7fcfe 0%,#eef9fd 55%,#dff4fb 100%) !important;
border:1px solid rgba(123,200,228,.24) !important;
box-shadow:0 20px 48px rgba(54,126,160,.09) !important;
}
body.appleBusinessPage .abHeroVisual::before,
body.appleBusinessPage .abHeroVisual::after{
display:none !important;
content:none !important;
}
body.appleBusinessPage .abHeroCubeStage{
inset:0 !important;
transform:none !important;
perspective:1800px !important;
perspective-origin:50% 50% !important;
}
body.appleBusinessPage .abHeroCube.appleTrueCube{
width:min(68%,460px) !important;
max-width:460px !important;
height:252px !important;
min-height:252px !important;
max-height:252px !important;
--apple-cube-depth:108px !important;
transform:rotateX(-3deg) rotateY(0deg) !important;
}
body.appleBusinessPage .abHeroCubeFace{
border-radius:20px !important;
box-shadow:0 16px 34px rgba(38,88,116,.10) !important;
}
body.appleBusinessPage .abHeroGlass{
left:16px !important;
bottom:14px !important;
max-width:40% !important;
padding:8px 10px !important;
border-radius:14px !important;
background:rgba(255,255,255,.86) !important;
border:1px solid rgba(104,194,226,.20) !important;
box-shadow:0 8px 20px rgba(57,136,172,.08) !important;
}
body.appleBusinessPage .abHeroGlass span{
font-size:8px !important;
letter-spacing:.08em !important;
}
body.appleBusinessPage .abHeroGlass strong{
font-size:12px !important;
line-height:1.16 !important;
margin-top:3px !important;
}
/* Tablet */
@media(max-width:1100px){
body.homePage .appleHomeVisual.appleCubeVisual{
min-height:290px !important;
height:290px !important;
}
body.homePage .appleHomeCube.appleTrueCube{
width:min(70%,350px) !important;
height:194px !important;
min-height:194px !important;
max-height:194px !important;
--apple-cube-depth:84px !important;
}
body.appleBusinessPage .abHeroVisual{
min-height:350px !important;
}
body.appleBusinessPage .abHeroCube.appleTrueCube{
width:min(72%,400px) !important;
height:220px !important;
min-height:220px !important;
max-height:220px !important;
--apple-cube-depth:94px !important;
}
}
/* Mobile */
@media(max-width:760px){
body.homePage .appleHomeVisual.appleCubeVisual{
min-height:230px !important;
height:230px !important;
border-radius:22px !important;
}
body.homePage .appleHomeCube.appleTrueCube{
width:min(74%,250px) !important;
height:138px !important;
min-height:138px !important;
max-height:138px !important;
--apple-cube-depth:58px !important;
}
body.homePage .appleHomeCubeFace{
border-radius:14px !important;
}
body.appleBusinessPage .abHeroVisual{
min-height:250px !important;
border-radius:22px !important;
}
body.appleBusinessPage .abHeroCube.appleTrueCube{
width:min(74%,262px) !important;
height:146px !important;
min-height:146px !important;
max-height:146px !important;
--apple-cube-depth:62px !important;
}
body.appleBusinessPage .abHeroCubeFace{
border-radius:14px !important;
}
body.appleBusinessPage .abHeroGlass{
left:10px !important;
bottom:10px !important;
max-width:38% !important;
padding:6px 8px !important;
border-radius:11px !important;
}
body.appleBusinessPage .abHeroGlass span{
display:none !important;
}
body.appleBusinessPage .abHeroGlass strong{
font-size:8px !important;
line-height:1.1 !important;
margin-top:0 !important;
}
}
@media(max-width:430px){
body.homePage .appleHomeVisual.appleCubeVisual{
min-height:214px !important;
height:214px !important;
}
body.homePage .appleHomeCube.appleTrueCube{
width:min(74%,226px) !important;
height:126px !important;
min-height:126px !important;
max-height:126px !important;
--apple-cube-depth:52px !important;
}
body.appleBusinessPage .abHeroVisual{
min-height:232px !important;
}
body.appleBusinessPage .abHeroCube.appleTrueCube{
width:min(72%,230px) !important;
height:128px !important;
min-height:128px !important;
max-height:128px !important;
--apple-cube-depth:54px !important;
}
body.appleBusinessPage .abHeroGlass{
max-width:36% !important;
left:8px !important;
bottom:8px !important;
padding:5px 7px !important;
}
body.appleBusinessPage .abHeroGlass strong{
font-size:7px !important;
}
}
/* =========================
V61 – restore rotating cube, remove inner frames, clean single-panel layout
========================= */
/* Force only one clean blue panel behind the rotating Apple visuals */
body.homePage .appleHomeVisual.appleCubeVisual,
body.appleBusinessPage .abHeroVisual{
position:relative !important;
overflow:hidden !important;
background:linear-gradient(135deg,#f4fbfe 0%,#eaf7fd 55%,#dff2fb 100%) !important;
border:1px solid rgba(123,200,228,.26) !important;
box-shadow:0 16px 40px rgba(52,126,160,.08) !important;
}
body.homePage .appleHomeVisual.appleCubeVisual::before,
body.homePage .appleHomeVisual.appleCubeVisual::after,
body.appleBusinessPage .abHeroVisual::before,
body.appleBusinessPage .abHeroVisual::after{
content:none !important;
display:none !important;
}
/* Stage itself should not look like a second frame */
body.homePage .appleHomeCubeStage,
body.appleBusinessPage .abHeroCubeStage{
position:absolute !important;
inset:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:transparent !important;
border:none !important;
box-shadow:none !important;
perspective-origin:50% 50% !important;
overflow:visible !important;
}
body.homePage .appleHomeCubeStage{perspective:1750px !important}
body.appleBusinessPage .abHeroCubeStage{perspective:1850px !important}
/* Keep the rotating prism shape, but without any extra frame around the image */
body.homePage .appleHomeCube.appleTrueCube,
body.appleBusinessPage .abHeroCube.appleTrueCube{
transform-style:preserve-3d !important;
will-change:transform !important;
animation:none !important;
margin:auto !important;
}
body.homePage .appleHomeCubeFace,
body.appleBusinessPage .abHeroCubeFace{
background:transparent !important;
border:none !important;
box-shadow:none !important;
overflow:hidden !important;
backface-visibility:hidden !important;
-webkit-backface-visibility:hidden !important;
}
body.homePage .appleHomeCubeFace img,
body.appleBusinessPage .abHeroCubeFace img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center center !important;
border-radius:24px !important;
box-shadow:0 12px 28px rgba(37,87,114,.12) !important;
}
/* Desktop sizes */
body.homePage .appleHomeVisual.appleCubeVisual{
min-height:320px !important;
height:320px !important;
border-radius:28px !important;
}
body.homePage .appleHomeCube.appleTrueCube{
width:min(66%,400px) !important;
height:220px !important;
min-height:220px !important;
max-height:220px !important;
--apple-cube-depth:112px !important;
}
body.appleBusinessPage .abHeroVisual{
min-height:390px !important;
border-radius:30px !important;
}
body.appleBusinessPage .abHeroCube.appleTrueCube{
width:min(66%,470px) !important;
height:264px !important;
min-height:264px !important;
max-height:264px !important;
--apple-cube-depth:132px !important;
}
/* Hero note: one compact row instead of multiple lines */
body.appleBusinessPage .abHeroGlass{
z-index:3 !important;
left:16px !important;
right:auto !important;
bottom:16px !important;
max-width:none !important;
width:auto !important;
display:inline-flex !important;
flex-direction:column !important;
align-items:flex-start !important;
gap:2px !important;
padding:8px 12px !important;
border-radius:14px !important;
background:rgba(255,255,255,.90) !important;
border:1px solid rgba(104,194,226,.20) !important;
box-shadow:0 8px 20px rgba(57,136,172,.08) !important;
}
body.appleBusinessPage .abHeroGlass span{
font-size:8px !important;
line-height:1 !important;
letter-spacing:.08em !important;
}
body.appleBusinessPage .abHeroGlass strong{
margin-top:0 !important;
font-size:11px !important;
line-height:1.05 !important;
white-space:nowrap !important;
}
/* Tablet */
@media (max-width:1100px){
body.homePage .appleHomeVisual.appleCubeVisual{
min-height:290px !important;
height:290px !important;
}
body.homePage .appleHomeCube.appleTrueCube{
width:min(70%,350px) !important;
height:194px !important;
min-height:194px !important;
max-height:194px !important;
--apple-cube-depth:98px !important;
}
body.appleBusinessPage .abHeroVisual{min-height:350px !important}
body.appleBusinessPage .abHeroCube.appleTrueCube{
width:min(70%,410px) !important;
height:230px !important;
min-height:230px !important;
max-height:230px !important;
--apple-cube-depth:115px !important;
}
}
/* Mobile */
@media (max-width:760px){
body.homePage .appleHomeVisual.appleCubeVisual{
min-height:230px !important;
height:230px !important;
border-radius:22px !important;
}
body.homePage .appleHomeCube.appleTrueCube{
width:min(76%,248px) !important;
height:140px !important;
min-height:140px !important;
max-height:140px !important;
--apple-cube-depth:70px !important;
}
body.homePage .appleHomeCubeFace img{border-radius:16px !important}
body.appleBusinessPage .abHeroVisual{
min-height:250px !important;
border-radius:22px !important;
}
body.appleBusinessPage .abHeroCube.appleTrueCube{
width:min(76%,258px) !important;
height:145px !important;
min-height:145px !important;
max-height:145px !important;
--apple-cube-depth:72px !important;
}
body.appleBusinessPage .abHeroCubeFace img{border-radius:16px !important}
body.appleBusinessPage .abHeroGlass{
left:10px !important;
bottom:10px !important;
padding:5px 8px !important;
border-radius:10px !important;
}
body.appleBusinessPage .abHeroGlass span{display:none !important}
body.appleBusinessPage .abHeroGlass strong{
font-size:7px !important;
line-height:1 !important;
white-space:nowrap !important;
}
}
@media (max-width:430px){
body.homePage .appleHomeVisual.appleCubeVisual{
min-height:214px !important;
height:214px !important;
}
body.homePage .appleHomeCube.appleTrueCube{
width:min(76%,224px) !important;
height:126px !important;
min-height:126px !important;
max-height:126px !important;
--apple-cube-depth:63px !important;
}
body.appleBusinessPage .abHeroVisual{min-height:228px !important}
body.appleBusinessPage .abHeroCube.appleTrueCube{
width:min(74%,224px) !important;
height:126px !important;
min-height:126px !important;
max-height:126px !important;
--apple-cube-depth:63px !important;
}
}
/* =========================
V62 – cleaner cube motion, wider stage, soft glass surround
========================= */
body.homePage .appleHomeVisual.appleCubeVisual,
body.appleBusinessPage .abHeroVisual{
position:relative !important;
overflow:hidden !important;
background:linear-gradient(135deg,#f6fbfe 0%,#edf8fd 56%,#def0f9 100%) !important;
border:1px solid rgba(112,196,224,.24) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 18px 44px rgba(50,120,152,.08) !important;
}
body.homePage .appleHomeVisual.appleCubeVisual::before,
body.homePage .appleHomeVisual.appleCubeVisual::after,
body.appleBusinessPage .abHeroVisual::before,
body.appleBusinessPage .abHeroVisual::after{
content:none !important;
display:none !important;
}
body.homePage .appleHomeCubeStage,
body.appleBusinessPage .abHeroCubeStage{
position:absolute !important;
inset:18px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
perspective-origin:50% 50% !important;
overflow:visible !important;
background:transparent !important;
border:none !important;
box-shadow:none !important;
transform:none !important;
}
body.homePage .appleHomeCubeStage::before,
body.appleBusinessPage .abHeroCubeStage::before{
content:'' !important;
position:absolute !important;
inset:10% 8% !important;
border-radius:28px !important;
background:linear-gradient(145deg,rgba(255,255,255,.36),rgba(255,255,255,.18)) !important;
border:1px solid rgba(255,255,255,.32) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 12px 30px rgba(90,161,193,.09) !important;
backdrop-filter:blur(6px) !important;
-webkit-backdrop-filter:blur(6px) !important;
z-index:0 !important;
}
body.homePage .appleHomeCube.appleTrueCube,
body.appleBusinessPage .abHeroCube.appleTrueCube{
position:relative !important;
z-index:1 !important;
transform-style:preserve-3d !important;
will-change:transform !important;
animation:none !important;
margin:auto !important;
}
body.homePage .appleHomeCubeFace,
body.appleBusinessPage .abHeroCubeFace{
background:transparent !important;
border:none !important;
outline:none !important;
box-shadow:none !important;
overflow:hidden !important;
backface-visibility:hidden !important;
-webkit-backface-visibility:hidden !important;
}
body.homePage .appleHomeCubeFace img,
body.appleBusinessPage .abHeroCubeFace img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center center !important;
border-radius:26px !important;
box-shadow:0 12px 28px rgba(42,90,115,.12) !important;
}
/* slightly wider, softer depth so edge lines are less visible during rotation */
body.homePage .appleHomeVisual.appleCubeVisual{
min-height:350px !important;
height:350px !important;
border-radius:30px !important;
}
body.homePage .appleHomeCube.appleTrueCube{
width:min(78%,500px) !important;
height:262px !important;
min-height:262px !important;
max-height:262px !important;
--apple-cube-depth:86px !important;
}
body.homePage .appleHomeCubeStage{perspective:2100px !important}
body.appleBusinessPage .abHeroVisual{
min-height:430px !important;
border-radius:32px !important;
}
body.appleBusinessPage .abHeroCube.appleTrueCube{
width:min(80%,580px) !important;
height:320px !important;
min-height:320px !important;
max-height:320px !important;
--apple-cube-depth:92px !important;
}
body.appleBusinessPage .abHeroCubeStage{perspective:2200px !important}
/* compact note, single row feel */
body.appleBusinessPage .abHeroGlass{
left:18px !important;
bottom:18px !important;
right:auto !important;
width:auto !important;
max-width:calc(100% - 36px) !important;
padding:8px 12px !important;
border-radius:14px !important;
background:rgba(255,255,255,.90) !important;
border:1px solid rgba(109,198,227,.18) !important;
box-shadow:0 10px 22px rgba(54,133,164,.08) !important;
}
body.appleBusinessPage .abHeroGlass span{
display:block !important;
color:#45b2dd !important;
font-size:9px !important;
line-height:1 !important;
letter-spacing:.1em !important;
}
body.appleBusinessPage .abHeroGlass strong{
display:block !important;
margin-top:3px !important;
color:#17384d !important;
font-size:12px !important;
line-height:1.02 !important;
white-space:nowrap !important;
}
@media (max-width:1100px){
body.homePage .appleHomeVisual.appleCubeVisual{min-height:310px !important;height:310px !important}
body.homePage .appleHomeCube.appleTrueCube{width:min(80%,420px) !important;height:220px !important;min-height:220px !important;max-height:220px !important;--apple-cube-depth:76px !important}
body.appleBusinessPage .abHeroVisual{min-height:370px !important}
body.appleBusinessPage .abHeroCube.appleTrueCube{width:min(82%,500px) !important;height:275px !important;min-height:275px !important;max-height:275px !important;--apple-cube-depth:84px !important}
}
@media (max-width:760px){
body.homePage .appleHomeVisual.appleCubeVisual{
min-height:238px !important;
height:238px !important;
border-radius:24px !important;
}
body.homePage .appleHomeCubeStage{inset:12px !important}
body.homePage .appleHomeCubeStage::before{inset:8% 6% !important;border-radius:20px !important}
body.homePage .appleHomeCube.appleTrueCube{
width:min(80%,270px) !important;
height:150px !important;
min-height:150px !important;
max-height:150px !important;
--apple-cube-depth:58px !important;
}
body.homePage .appleHomeCubeFace img{border-radius:18px !important}
body.appleBusinessPage .abHeroVisual{
min-height:255px !important;
border-radius:24px !important;
}
body.appleBusinessPage .abHeroCubeStage{inset:12px !important}
body.appleBusinessPage .abHeroCubeStage::before{inset:8% 6% !important;border-radius:20px !important}
body.appleBusinessPage .abHeroCube.appleTrueCube{
width:min(80%,274px) !important;
height:152px !important;
min-height:152px !important;
max-height:152px !important;
--apple-cube-depth:58px !important;
}
body.appleBusinessPage .abHeroCubeFace img{border-radius:18px !important}
body.appleBusinessPage .abHeroGlass{
left:10px !important;
bottom:10px !important;
max-width:calc(100% - 20px) !important;
padding:5px 8px !important;
border-radius:10px !important;
}
body.appleBusinessPage .abHeroGlass span{display:none !important}
body.appleBusinessPage .abHeroGlass strong{
font-size:7px !important;
line-height:1 !important;
white-space:nowrap !important;
}
}
@media (max-width:430px){
body.homePage .appleHomeVisual.appleCubeVisual{min-height:220px !important;height:220px !important}
body.homePage .appleHomeCube.appleTrueCube{width:min(82%,238px) !important;height:134px !important;min-height:134px !important;max-height:134px !important;--apple-cube-depth:52px !important}
body.appleBusinessPage .abHeroVisual{min-height:232px !important}
body.appleBusinessPage .abHeroCube.appleTrueCube{width:min(82%,238px) !important;height:134px !important;min-height:134px !important;max-height:134px !important;--apple-cube-depth:52px !important}
}
/* =========================
V70 – final stable Apple visual
Fixed glass container + clean horizontal slide.
Only this Apple image block is changed.
========================= */
body.homePage .appleHomeCubeStage,
body.appleBusinessPage .abHeroCubeStage{
position:absolute !important;
inset:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:hidden !important;
perspective:none !important;
transform:none !important;
}
body.homePage .appleHomeCube.appleTrueCube.appleStableSlider,
body.appleBusinessPage .abHeroCube.appleTrueCube.appleStableSlider{
display:flex !important;
position:relative !important;
width:72% !important;
max-width:520px !important;
height:280px !important;
min-height:280px !important;
max-height:280px !important;
transform:translate3d(0,0,0) !important;
transform-style:flat !important;
transition:transform .9s cubic-bezier(.65,.02,.2,1) !important;
will-change:transform !important;
}
body.homePage .appleHomeCube.appleTrueCube.appleStableSlider{
width:70% !important;
max-width:430px !important;
height:242px !important;
min-height:242px !important;
max-height:242px !important;
}
body.homePage .appleStableSlide,
body.appleBusinessPage .appleStableSlide{
position:relative !important;
inset:auto !important;
flex:0 0 100% !important;
width:100% !important;
height:100% !important;
margin:0 !important;
transform:none !important;
border:none !important;
border-radius:24px !important;
overflow:hidden !important;
background:#fff !important;
box-shadow:0 18px 38px rgba(34,85,110,.12) !important;
backface-visibility:visible !important;
}
body.homePage .appleStableSlide img,
body.appleBusinessPage .appleStableSlide img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center center !important;
display:block !important;
border-radius:24px !important;
}
body.homePage .appleHomeVisual.appleCubeVisual,
body.appleBusinessPage .abHeroVisual{
overflow:hidden !important;
}
@media(max-width:1100px){
body.appleBusinessPage .abHeroCube.appleTrueCube.appleStableSlider{
width:76% !important;
max-width:460px !important;
height:255px !important;
min-height:255px !important;
max-height:255px !important;
}
body.homePage .appleHomeCube.appleTrueCube.appleStableSlider{
width:74% !important;
max-width:390px !important;
height:220px !important;
min-height:220px !important;
max-height:220px !important;
}
}
@media(max-width:760px){
body.appleBusinessPage .abHeroCube.appleTrueCube.appleStableSlider{
width:80% !important;
max-width:300px !important;
height:168px !important;
min-height:168px !important;
max-height:168px !important;
}
body.homePage .appleHomeCube.appleTrueCube.appleStableSlider{
width:78% !important;
max-width:280px !important;
height:158px !important;
min-height:158px !important;
max-height:158px !important;
}
body.homePage .appleStableSlide,
body.appleBusinessPage .appleStableSlide,
body.homePage .appleStableSlide img,
body.appleBusinessPage .appleStableSlide img{
border-radius:18px !important;
}
}
/* =========================
V71 – one image at a time, continuous push slider
Only Apple animated image block changed.
========================= */
/* The stage is now the actual viewport. This prevents the next image
from being visible beside the current one. */
body.homePage .appleHomeCubeStage,
body.appleBusinessPage .abHeroCubeStage{
inset:auto !important;
left:50% !important;
top:50% !important;
transform:translate(-50%,-50%) !important;
overflow:hidden !important;
display:block !important;
border:none !important;
box-shadow:none !important;
background:transparent !important;
}
body.appleBusinessPage .abHeroCubeStage{
width:72% !important;
max-width:520px !important;
height:280px !important;
}
body.homePage .appleHomeCubeStage{
width:70% !important;
max-width:430px !important;
height:242px !important;
}
/* Track fills the viewport exactly; only one slide can be visible. */
body.homePage .appleHomeCube.appleTrueCube.appleStableSlider,
body.appleBusinessPage .abHeroCube.appleTrueCube.appleStableSlider{
display:flex !important;
position:relative !important;
width:100% !important;
max-width:none !important;
height:100% !important;
min-height:100% !important;
max-height:100% !important;
margin:0 !important;
transform:translate3d(0,0,0) !important;
transition:transform .9s cubic-bezier(.65,.02,.2,1) !important;
will-change:transform !important;
}
/* Exactly one image per viewport. */
body.homePage .appleStableSlide,
body.appleBusinessPage .appleStableSlide{
flex:0 0 100% !important;
width:100% !important;
height:100% !important;
min-width:100% !important;
max-width:100% !important;
position:relative !important;
inset:auto !important;
margin:0 !important;
transform:none !important;
border:none !important;
border-radius:24px !important;
overflow:hidden !important;
background:#fff !important;
}
body.homePage .appleStableSlide img,
body.appleBusinessPage .appleStableSlide img{
width:100% !important;
height:100% !important;
display:block !important;
object-fit:cover !important;
object-position:var(--apple-slide-position,50% 50%) !important;
border-radius:24px !important;
}
/* Individual crop control examples:
= show more of the upper part
= shift crop to the right
*/
@media(max-width:1100px){
body.appleBusinessPage .abHeroCubeStage{
width:76% !important;
max-width:460px !important;
height:255px !important;
}
body.homePage .appleHomeCubeStage{
width:74% !important;
max-width:390px !important;
height:220px !important;
}
}
@media(max-width:760px){
body.appleBusinessPage .abHeroCubeStage{
width:80% !important;
max-width:300px !important;
height:168px !important;
}
body.homePage .appleHomeCubeStage{
width:78% !important;
max-width:280px !important;
height:158px !important;
}
body.homePage .appleStableSlide,
body.appleBusinessPage .appleStableSlide,
body.homePage .appleStableSlide img,
body.appleBusinessPage .appleStableSlide img{
border-radius:18px !important;
}
}
/* =========================
V72 – remove visible square/background edge
Only clips/cleans the animated image viewport.
========================= */
body.homePage .appleHomeCubeStage,
body.appleBusinessPage .abHeroCubeStage{
border-radius:24px !important;
clip-path:inset(0 round 24px) !important;
overflow:hidden !important;
background:transparent !important;
}
/* No white slide rectangle behind the rounded image. */
body.homePage .appleStableSlide,
body.appleBusinessPage .appleStableSlide{
background:transparent !important;
box-shadow:none !important;
border-radius:24px !important;
overflow:hidden !important;
}
/* Let the viewport perform the rounding, avoiding a second visible edge. */
body.homePage .appleStableSlide img,
body.appleBusinessPage .appleStableSlide img{
border-radius:0 !important;
display:block !important;
}
/* Remove any leftover decoration from old cube versions. */
body.homePage .appleHomeCube.appleTrueCube.appleStableSlider::before,
body.homePage .appleHomeCube.appleTrueCube.appleStableSlider::after,
body.appleBusinessPage .abHeroCube.appleTrueCube.appleStableSlider::before,
body.appleBusinessPage .abHeroCube.appleTrueCube.appleStableSlider::after{
content:none !important;
display:none !important;
}
@media(max-width:760px){
body.homePage .appleHomeCubeStage,
body.appleBusinessPage .abHeroCubeStage{
border-radius:18px !important;
clip-path:inset(0 round 18px) !important;
}
body.homePage .appleStableSlide,
body.appleBusinessPage .appleStableSlide{
border-radius:18px !important;
}
}
/* =========================
V73 – Apple image block larger inside container
Goal: image should sit bigger with only a small clean margin around it.
Only this Apple visual block is changed.
========================= */
body.homePage .appleHomeCubeStage,
body.appleBusinessPage .abHeroCubeStage{
left:50% !important;
top:50% !important;
transform:translate(-50%,-50%) !important;
width:calc(100% - 32px) !important;
height:calc(100% - 32px) !important;
max-width:none !important;
max-height:none !important;
overflow:hidden !important;
border-radius:26px !important;
clip-path:inset(0 round 26px) !important;
}
body.homePage .appleHomeCube.appleTrueCube.appleStableSlider,
body.appleBusinessPage .abHeroCube.appleTrueCube.appleStableSlider{
width:100% !important;
height:100% !important;
min-height:100% !important;
max-height:100% !important;
max-width:none !important;
}
body.homePage .appleStableSlide,
body.appleBusinessPage .appleStableSlide{
width:100% !important;
height:100% !important;
border-radius:26px !important;
background:transparent !important;
box-shadow:none !important;
}
body.homePage .appleStableSlide img,
body.appleBusinessPage .appleStableSlide img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center center !important;
border-radius:26px !important;
display:block !important;
}
@media (max-width:760px){
body.homePage .appleHomeCubeStage,
body.appleBusinessPage .abHeroCubeStage{
width:calc(100% - 20px) !important;
height:calc(100% - 20px) !important;
border-radius:18px !important;
clip-path:inset(0 round 18px) !important;
}
body.homePage .appleStableSlide,
body.appleBusinessPage .appleStableSlide,
body.homePage .appleStableSlide img,
body.appleBusinessPage .appleStableSlide img{
border-radius:18px !important;
}
}
/* =========================
V74 – shared SU-IT visual language + cleaned Apple slider
Apple content/layout remains unchanged; only obsolete cube naming is removed.
========================= */
/* Clean semantic Apple slider. One image is always visible. */
.appleSliderViewport{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:calc(100% - 32px);
height:calc(100% - 32px);
overflow:hidden;
border-radius:26px;
clip-path:inset(0 round 26px);
background:transparent;
pointer-events:none;
}
.appleSliderTrack{
position:relative;
display:flex;
width:100%;
height:100%;
margin:0;
transform:translate3d(0,0,0);
transition:transform .9s cubic-bezier(.65,.02,.2,1);
will-change:transform;
}
.appleSlide{
position:relative;
flex:0 0 100%;
width:100%;
min-width:100%;
height:100%;
margin:0;
overflow:hidden;
border:0;
background:transparent;
}
.appleSlide img{
width:100%;
height:100%;
display:block;
object-fit:cover;
object-position:var(--apple-slide-position,50% 50%);
}
body.homePage .appleHomeVisual.appleCubeVisual,
body.appleBusinessPage .abHeroVisual{overflow:hidden!important}
@media(max-width:760px){
.appleSliderViewport{
width:calc(100% - 20px);
height:calc(100% - 20px);
border-radius:18px;
clip-path:inset(0 round 18px);
}
}
/* Shared visual language for non-Apple service pages. */
body.servicePage{--service-a:#45bdeb;--service-b:#86dfff;--service-c:#5d86ff}
body.servicePage.themeSecurity{--service-a:#4bc9c4;--service-b:#75dff0;--service-c:#4d91ed}
body.servicePage.themeBusiness{--service-a:#ffb563;--service-b:#ff8b9d;--service-c:#7f72f5}
body.servicePage.themeConnect{--service-a:#6c8cf5;--service-b:#a06ef0;--service-c:#5f95f5}
body.servicePage.themeWorkplace{--service-a:#5bbcf6;--service-b:#8b79f5;--service-c:#63cfae}
body.servicePage:not(.microsoftSolutionsPage) .pageHero{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 18% 18%,color-mix(in srgb,var(--service-a) 16%,transparent),transparent 34%),
radial-gradient(circle at 78% 5%,color-mix(in srgb,var(--service-c) 11%,transparent),transparent 30%),
linear-gradient(145deg,#fff 10%,#f7fcff 58%,#edf9fe 100%);
padding:62px 0 68px;
}
body.servicePage:not(.microsoftSolutionsPage) .pageHero .shell{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(330px,43%);
gap:54px;
align-items:center;
}
body.servicePage:not(.microsoftSolutionsPage) .pageHero .shell::after{
content:"";
grid-column:2;
grid-row:1 / span 6;
width:100%;
min-height:330px;
align-self:stretch;
border-radius:30px;
background-image:
linear-gradient(145deg,rgba(255,255,255,.06),rgba(73,184,229,.08)),
var(--service-photo);
background-size:cover;
background-position:center;
border:1px solid rgba(255,255,255,.92);
box-shadow:0 26px 70px rgba(40,111,145,.16),inset 0 1px 0 rgba(255,255,255,.8);
animation:suPhotoFloat 7s ease-in-out infinite alternate;
}
body.servicePage:not(.microsoftSolutionsPage) .pageHero .crumbs,
body.servicePage:not(.microsoftSolutionsPage) .pageHero .k,
body.servicePage:not(.microsoftSolutionsPage) .pageHero h1,
body.servicePage:not(.microsoftSolutionsPage) .pageHero p,
body.servicePage:not(.microsoftSolutionsPage) .pageHero .heroActions{grid-column:1}
body.servicePage:not(.microsoftSolutionsPage) .pageHero h1{
max-width:760px;
font-size:clamp(46px,5.3vw,74px)!important;
line-height:.98;
letter-spacing:-.05em;
margin:8px 0 18px;
background-image:linear-gradient(90deg,#173b55 0%,#173b55 22%,var(--service-a) 68%,var(--service-b) 100%)!important;
-webkit-background-clip:text!important;
background-clip:text!important;
color:transparent!important;
}
body.servicePage:not(.microsoftSolutionsPage) .center h2{
background-image:linear-gradient(90deg,#173b55,var(--service-a),var(--service-b))!important;
-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
body.servicePage:not(.microsoftSolutionsPage) .infoCard{transition:transform .3s,box-shadow .3s}
body.servicePage:not(.microsoftSolutionsPage) .infoCard:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(62,125,155,.16)}
body.servicePage:not(.microsoftSolutionsPage) .processStep{transition:transform .3s,box-shadow .3s;position:relative}
body.servicePage:not(.microsoftSolutionsPage) .processStep:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:22px 22px 0 0;background:linear-gradient(90deg,var(--service-a),var(--service-b))}
body.servicePage:not(.microsoftSolutionsPage) .processStep:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(62,125,155,.14)}
body.servicePage:not(.microsoftSolutionsPage) .processStep span{transition:transform .35s}
body.servicePage:not(.microsoftSolutionsPage) .processStep:hover span{transform:scale(1.12) rotate(-6deg)}
body.servicePage:not(.microsoftSolutionsPage) .pageHero .k{
color:var(--service-a)!important;
}
body.servicePage:not(.microsoftSolutionsPage) .section.soft{
background:linear-gradient(180deg,#f3fbff 0%,#fff 52%,#f5fbfe 100%)!important;
}
body.servicePage:not(.microsoftSolutionsPage) .pricingCard:hover,
body.servicePage:not(.microsoftSolutionsPage) .overviewCard:hover,
body.servicePage:not(.microsoftSolutionsPage) .feature:hover{
transform:translateY(-5px);
box-shadow:0 25px 60px rgba(51,111,140,.14)!important;
}
body.servicePage:not(.microsoftSolutionsPage) .productBadge,
body.servicePage:not(.microsoftSolutionsPage) .planBadge{
background:color-mix(in srgb,var(--service-a) 11%,#fff)!important;
color:color-mix(in srgb,var(--service-a) 72%,#17425b)!important;
border-color:color-mix(in srgb,var(--service-a) 22%,transparent)!important;
}
/* Overview pages now use the same photo/glass rhythm without becoming identical templates. */
body.overviewPage .pageHero .shell{position:relative;z-index:1}
body.overviewPage .pageHero .shell::after{
content:"";
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
width:min(39%,440px);
height:calc(100% + 6px);
min-height:275px;
border-radius:30px;
background-image:linear-gradient(145deg,rgba(255,255,255,.08),rgba(69,189,235,.10)),var(--overview-photo);
background-size:cover;
background-position:center;
border:1px solid rgba(255,255,255,.9);
box-shadow:0 24px 66px rgba(43,107,138,.14);
z-index:-1;
animation:suPhotoFloat 8s ease-in-out infinite alternate;
}
body.overviewPage .pageHero .shell>*{max-width:55%}
body.overviewPage .serviceCard img{
filter:saturate(.92) contrast(.98) brightness(1.04);
}
body.overviewPage .serviceCard .shade{
background:linear-gradient(180deg,rgba(10,45,66,.00),rgba(10,45,66,.70));
}
@keyframes suPhotoFloat{
from{transform:translateY(0) scale(1)}
to{transform:translateY(-5px) scale(1.008)}
}
body.overviewPage .pageHero .shell::after{animation-name:suOverviewPhotoFloat}
@keyframes suOverviewPhotoFloat{
from{transform:translateY(-50%) translateY(0) scale(1)}
to{transform:translateY(-50%) translateY(-5px) scale(1.008)}
}
@media(max-width:1024px){
body.servicePage:not(.microsoftSolutionsPage) .pageHero .shell{grid-template-columns:minmax(0,1fr) minmax(280px,39%);gap:34px}
body.servicePage:not(.microsoftSolutionsPage) .pageHero .shell::after{min-height:285px}
body.overviewPage .pageHero .shell::after{width:36%;min-height:240px}
body.overviewPage .pageHero .shell>*{max-width:59%}
}
@media(max-width:760px){
body.servicePage:not(.microsoftSolutionsPage) .pageHero{padding:46px 0 52px}
body.servicePage:not(.microsoftSolutionsPage) .pageHero .shell{grid-template-columns:1fr;gap:24px}
body.servicePage:not(.microsoftSolutionsPage) .pageHero .shell::after{
grid-column:1;
grid-row:auto;
min-height:230px;
border-radius:22px;
animation:none;
}
body.servicePage:not(.microsoftSolutionsPage) .pageHero .crumbs,
body.servicePage:not(.microsoftSolutionsPage) .pageHero .k,
body.servicePage:not(.microsoftSolutionsPage) .pageHero h1,
body.servicePage:not(.microsoftSolutionsPage) .pageHero p,
body.servicePage:not(.microsoftSolutionsPage) .pageHero .heroActions{grid-column:1}
body.servicePage:not(.microsoftSolutionsPage) .pageHero h1{font-size:clamp(39px,11vw,52px)!important}
body.overviewPage .pageHero .shell::after{
position:relative;
display:block;
top:auto;
right:auto;
transform:none;
width:100%;
height:220px;
min-height:220px;
margin-top:26px;
border-radius:22px;
animation:none;
}
body.overviewPage .pageHero .shell>*{max-width:none}
}
@media(prefers-reduced-motion:reduce){
body.servicePage:not(.microsoftSolutionsPage) .pageHero .shell::after,
body.overviewPage .pageHero .shell::after{animation:none!important}
}
/* =========================
V81 – Apple procurement: SU-IT iPhone enlarged substantially inside existing card
========================= */
body.appleBusinessPage .abProcurementPlate{
align-items:center !important;
justify-content:center !important;
gap:30px !important;
}
body.appleBusinessPage .abProcurementPlate .device-ipad{
width:min(51%,270px) !important;
}
body.appleBusinessPage .abProcurementPhoneCard{
position:relative !important;
flex:0 0 min(43%,272px) !important;
width:min(43%,272px) !important;
min-width:210px !important;
height:336px !important;
padding:2px !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:hidden !important;
border-radius:34px !important;
background:linear-gradient(155deg,rgba(255,255,255,.96),rgba(235,248,255,.94)) !important;
border:1px solid rgba(103,183,216,.18) !important;
box-shadow:0 18px 42px rgba(49,118,150,.10),inset 0 1px 0 rgba(255,255,255,.98) !important;
animation:abPhoneCardFloat 6.6s ease-in-out infinite !important;
}
body.appleBusinessPage .abProcurementPhoneCard::before{
content:"" !important;
display:block !important;
position:absolute !important;
inset:3% 3% !important;
border-radius:28px !important;
background:radial-gradient(circle at 50% 45%,rgba(134,223,255,.22),rgba(255,255,255,0) 68%) !important;
pointer-events:none !important;
}
body.appleBusinessPage .abProcurementPhoneCard .phone-single{
position:relative !important;
z-index:1 !important;
inset:auto !important;
display:block !important;
width:112% !important;
height:112% !important;
max-width:none !important;
max-height:none !important;
object-fit:contain !important;
object-position:center center !important;
border-radius:0 !important;
opacity:1 !important;
visibility:visible !important;
filter:drop-shadow(0 18px 22px rgba(25,65,86,.18)) !important;
mix-blend-mode:normal !important;
transform:translateY(2px) !important;
transform-origin:center center !important;
}
@media(max-width:760px){
body.appleBusinessPage .abProcurementPlate{gap:18px !important;}
body.appleBusinessPage .abProcurementPhoneCard{
flex:0 0 min(78vw,252px) !important;
width:min(78vw,252px) !important;
min-width:0 !important;
height:312px !important;
padding:2px !important;
}
}
/* Domain-Suche (assets/domain-search.js, domains.html) */
.domain-search{max-width:720px;margin:0 auto 8px}
.domain-search__label{display:block;font-weight:800;color:#173b55;margin-bottom:8px;font-size:14px}
.domain-search__form{display:flex;gap:10px;background:#fff;border:1.5px solid rgba(70,148,187,.22);border-radius:16px;padding:6px;box-shadow:0 14px 34px rgba(62,125,155,.09)}
.domain-search__input{flex:1;border:0;background:transparent;padding:14px 16px;font-size:16px;color:#173b55;min-width:0}
.domain-search__input:focus{outline:2px solid #5fb8e0;outline-offset:2px;border-radius:10px}
.domain-search__submit{flex:0 0 auto;border:0;border-radius:12px;padding:0 24px;background:linear-gradient(135deg,#a4dff6,#7ecdef,#5fb8e0);color:#fff;font-weight:800;cursor:pointer;font-size:15px}
.domain-search__submit:hover{filter:brightness(1.03)}
.domain-search__hint{min-height:20px;color:#e0554f;font-size:13px;font-weight:700;margin:10px 2px 0}
.domain-legal-note{max-width:720px;margin:22px auto 0;color:#93a9b6;font-size:12px;line-height:1.6;text-align:center}
.domain-results{max-width:900px;margin:26px auto 0;display:grid;gap:12px}
.domain-result{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 20px;border-radius:16px;background:#fff;border:1.5px solid rgba(70,148,187,.16);box-shadow:0 10px 26px rgba(62,125,155,.06)}
.domain-result--loading{color:#6d8798;font-weight:700;justify-content:center}
.domain-result__name{font-weight:900;color:#173b55;font-size:16px;flex:1;min-width:160px}
.domain-result__status{font-size:13px;font-weight:800;padding:5px 12px;border-radius:999px}
.domain-result--available .domain-result__status{background:rgba(63,214,180,.14);color:#1f9d7a}
.domain-result--taken .domain-result__status{background:rgba(160,175,190,.16);color:#6d7f8c}
.domain-result--premium .domain-result__status{background:rgba(255,171,61,.16);color:#b8791a}
.domain-result--error .domain-result__status{background:rgba(224,85,79,.12);color:#c23f39}
.domain-result__price{display:flex;align-items:baseline;gap:5px;font-size:14px;color:#41647a}
.domain-result__price strong{font-size:19px;color:#173b55}
.domain-result__cta{border:0;border-radius:12px;padding:11px 18px;background:linear-gradient(135deg,#a4dff6,#5fb8e0);color:#fff;font-weight:800;cursor:pointer;font-size:13.5px;white-space:nowrap}
.domain-result__cta--ghost{background:#fff;border:1.5px solid rgba(70,148,187,.3);color:#173b55}
.domain-result__alt{border:0;background:transparent;color:#3aa9d0;font-weight:800;cursor:pointer;text-decoration:underline;font-size:13.5px}
@media(max-width:640px){.domain-search__form{flex-direction:column}.domain-search__submit{padding:13px}.domain-result{flex-direction:column;align-items:flex-start}}
/* =========================
V146 – visual polish pass
Consistent homepage spacing, premium overview pages and cleaner commerce UI.
========================= */
/* Homepage: Microsoft receives the same breathing room and glass-card rhythm as Apple. */
body.homePage .appleHomeFeature,
body.homePage .microsoftHomeFeature{
padding:76px 0 !important;
}
body.homePage .microsoftHomeFeature{
background:
radial-gradient(circle at 12% 18%,rgba(77,175,241,.08),transparent 28%),
radial-gradient(circle at 88% 72%,rgba(99,210,178,.08),transparent 28%),
linear-gradient(180deg,#ffffff 0%,#f5fbfe 100%) !important;
}
body.homePage .microsoftHomeInner{
padding:34px !important;
border:1px solid rgba(136,195,222,.18);
border-radius:34px;
background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(249,253,255,.96));
box-shadow:0 24px 60px rgba(48,101,129,.08);
backdrop-filter:blur(16px);
}
body.homePage .microsoftHomeCopy .k,
body.homePage .appleHomeCopy .k{margin-bottom:22px !important}
body.homePage .microsoftHomeCopy h2,
body.homePage .appleHomeCopy h2{margin-top:0 !important}
/* Main overview pages: one calm, recognisable SU-IT layout instead of unrelated templates. */
body.overviewPage .pageHero{
padding:72px 0 82px !important;
background:linear-gradient(180deg,#f7fcff 0%,#edf9fe 100%) !important;
}
body.overviewPage .pageHero .shell{
min-height:430px;
padding:48px 50px;
border-radius:36px;
border:1px solid rgba(115,186,219,.20);
background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(248,253,255,.94));
box-shadow:0 28px 70px rgba(48,108,139,.10);
overflow:hidden;
}
body.overviewPage .pageHero .shell::before{
content:"";
position:absolute;
inset:auto auto -150px -110px;
width:360px;height:360px;border-radius:50%;
background:radial-gradient(circle,rgba(134,223,255,.14),transparent 68%);
pointer-events:none;
}
body.overviewPage .pageHero .shell::after{
right:34px !important;
width:min(40%,470px) !important;
height:calc(100% - 68px) !important;
min-height:330px !important;
border-radius:28px !important;
border:1px solid rgba(255,255,255,.96) !important;
box-shadow:0 22px 52px rgba(35,91,120,.15) !important;
filter:saturate(.92) contrast(.98) brightness(1.04);
}
body.overviewPage .pageHero .shell>*{max-width:53% !important}
body.overviewPage .pageHero .crumbs{margin-bottom:28px !important}
body.overviewPage .pageHero .k{margin-bottom:18px !important;letter-spacing:.13em}
body.overviewPage .pageHero h1{margin:0 0 20px !important;letter-spacing:-.045em}
body.overviewPage .pageHero p:not(.k){font-size:18px;line-height:1.7;max-width:640px}
body.overviewPage .heroActions{margin-top:28px}
body.overviewPage .section{padding-top:82px;padding-bottom:82px}
body.overviewPage .serviceGrid{gap:20px}
body.overviewPage .serviceCard{
border-radius:26px;
border:1px solid rgba(112,182,215,.18);
background:linear-gradient(180deg,#fff,#f8fcfe);
box-shadow:0 16px 42px rgba(52,113,143,.07);
transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
body.overviewPage .serviceCard:hover{
transform:translateY(-5px);
box-shadow:0 24px 56px rgba(52,113,143,.12);
border-color:rgba(80,173,215,.28);
}
/* Commerce: calmer, more trustworthy storefront and cart. */
.cartDrawer{
width:min(480px,100%) !important;
background:#fbfdff !important;
box-shadow:-24px 0 70px rgba(23,61,85,.18) !important;
}
.cartHeader{
padding:26px 26px 20px !important;
background:rgba(255,255,255,.96);
border-bottom:1px solid #e8f1f5;
}
.cartHeader h2{font-size:30px;letter-spacing:-.035em;margin-top:4px}
.cartEyebrow{letter-spacing:.13em;color:#4ba9cf !important}
.cartItems{padding:20px 22px !important;gap:12px !important}
.cartItem{
border-radius:20px !important;
border:1px solid rgba(112,182,215,.16) !important;
background:#fff !important;
box-shadow:0 10px 28px rgba(44,103,132,.06);
}
.cartTotals{padding:20px 22px 24px !important;background:#f4fafc !important}
.cartSummaryBlock{background:#fff !important;border-color:#e3eef3 !important}
.cartTotals .shopPrimary{border-radius:14px !important;box-shadow:none !important}
.checkoutPage main{background:linear-gradient(180deg,#f7fcff,#fff 42%)}
.checkoutPage .checkoutWizard{
border:1px solid rgba(112,182,215,.18);
border-radius:30px;
overflow:hidden;
box-shadow:0 24px 64px rgba(44,103,132,.09);
background:#fff;
}
.checkoutPage .checkoutPanel,
.checkoutPage .checkoutAside{background:#fff}
.checkoutPage .checkoutAside{border-left:1px solid #e8f1f5}
.checkoutPage input,
.checkoutPage select,
.checkoutPage textarea{border-radius:13px !important;border-color:#dbeaf1 !important}
.checkoutPage input:focus,
.checkoutPage select:focus,
.checkoutPage textarea:focus{outline:none;border-color:#72c7e8 !important;box-shadow:0 0 0 4px rgba(114,199,232,.12)}
@media(max-width:900px){
body.homePage .microsoftHomeInner{padding:26px !important}
body.overviewPage .pageHero .shell{padding:36px 34px;min-height:390px}
body.overviewPage .pageHero .shell>*{max-width:55% !important}
}
@media(max-width:760px){
body.homePage .appleHomeFeature,
body.homePage .microsoftHomeFeature{padding:48px 0 !important}
body.homePage .microsoftHomeInner{padding:22px !important;border-radius:26px}
body.overviewPage .pageHero{padding:42px 0 48px !important}
body.overviewPage .pageHero .shell{padding:26px 22px;min-height:0;border-radius:28px}
body.overviewPage .pageHero .shell>*{max-width:none !important}
body.overviewPage .pageHero .shell::after{
right:auto !important;
width:100% !important;
height:230px !important;
min-height:230px !important;
margin-top:28px !important;
}
body.overviewPage .section{padding-top:58px;padding-bottom:58px}
}
/* ============================================================
V147 – Domain-Konfigurator & Checkout / Payment Flow
============================================================ */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.domainConfigurator{max-width:980px;margin:0 auto;padding:34px;border:1px solid rgba(74,151,188,.16);border-radius:28px;background:rgba(255,255,255,.88);box-shadow:0 24px 60px rgba(38,86,112,.08)}
.domainConfigurator__intro{max-width:760px;margin:0 0 28px}.domainConfigurator__intro h2{margin:7px 0 10px;color:#173b55;font-size:clamp(28px,4vw,44px);letter-spacing:-.035em}.domainConfigurator__intro p{margin:0;color:#678496;line-height:1.65}
.domain-search{max-width:none;margin:0}.domain-search__form--configured{align-items:stretch;padding:7px}
.domain-name-composer{display:flex;flex:1;min-width:0;border:1px solid rgba(75,151,189,.17);border-radius:13px;background:#fafdff;overflow:hidden}
.domain-name-composer .domain-search__input{outline:0!important}
.domain-tld-select-wrap{display:flex;align-items:center;border-left:1px solid rgba(75,151,189,.16);background:#f4fbfe}
.domain-tld-select{height:100%;min-width:112px;padding:0 38px 0 17px;border:0;background:transparent;color:#173b55;font-size:17px;font-weight:900;cursor:pointer;outline:0}
.domain-tld-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 2px 0}.domain-tld-chips button{border:1px solid rgba(75,151,189,.2);background:#fff;color:#526f82;border-radius:999px;padding:8px 13px;font-weight:800;cursor:pointer}.domain-tld-chips button.active,.domain-tld-chips button:hover{background:#eaf8fd;color:#167fa9;border-color:rgba(36,160,207,.3)}
.domain-search__hint{color:#718b9b;font-weight:600}.domain-result__main{flex:1;min-width:220px}.domain-result__name{font-size:18px}.domain-result__status{display:inline-flex;margin-top:6px}.domain-result__price{min-width:175px;display:flex;flex-direction:column;align-items:flex-start;gap:0}.domain-result__price small{margin-top:3px;color:#8194a0}.domain-result__cta.is-added{background:#41b99a}
.checkoutDomainItems{display:grid;gap:12px;margin-top:18px}.ckDomainCard{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(170px,.7fr) minmax(170px,.7fr);align-items:center;gap:20px;padding:20px;border:1px solid rgba(75,151,189,.16);border-radius:18px;background:#fbfdff}.ckDomainIdentity{display:flex;flex-direction:column;gap:4px}.ckDomainIdentity strong{font-size:19px;color:#173b55}.ckDomainIdentity>span:last-child{font-size:13px;color:#78909f}.ckDomainYears{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:800;color:#688397}.ckDomainYears select{min-height:44px;border:1px solid rgba(75,151,189,.22);border-radius:12px;background:#fff;padding:0 12px;color:#173b55;font-weight:800}.ckDomainPrice{display:flex;flex-direction:column;align-items:flex-end}.ckDomainPrice span,.ckDomainPrice small{font-size:12px;color:#7a909d}.ckDomainPrice strong{font-size:20px;color:#173b55}.ckDomainAddMore{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px;padding:18px 20px;border-radius:18px;background:#f4fbfe}.ckDomainAddMore div{display:flex;flex-direction:column;gap:4px}.ckDomainAddMore strong{color:#173b55}.ckDomainAddMore span{font-size:13px;color:#75909f}
.paymentHero{padding-bottom:40px}.paymentLayout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:24px;align-items:start}.paymentPanel,.paymentMethodPanel{background:#fff;border:1px solid rgba(75,151,189,.15);border-radius:26px;box-shadow:0 20px 54px rgba(38,86,112,.08)}.paymentPanel{padding:30px}.paymentMethodPanel{padding:28px;position:sticky;top:98px}.paymentOrderHead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:1px solid rgba(75,151,189,.12)}.paymentOrderHead h2{margin:4px 0 0;color:#173b55}.paymentSecureBadge{padding:8px 11px;border-radius:999px;background:#edf9f5;color:#28896f;font-size:12px;font-weight:900}.paymentItems{display:grid;gap:0}.paymentItem{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid rgba(75,151,189,.1)}.paymentItem>div{display:flex;flex-direction:column;gap:3px}.paymentItem span,.paymentItem small{font-size:12px;color:#7a929f}.paymentItem strong{color:#173b55}.paymentItem>b{color:#173b55;text-align:right}.paymentItem>b small{display:block;font-weight:500}.paymentTotals{margin-top:18px;padding-top:8px}.paymentTotals>div{display:flex;justify-content:space-between;gap:15px;padding:8px 0;color:#607d90}.paymentTotals strong{color:#173b55}.paymentTotals .paymentGrand{margin:10px -10px 2px;padding:17px 10px;border-radius:14px;background:#eff9fd;color:#173b55;font-weight:900}.paymentTotals .paymentGrand strong{font-size:24px}.paymentMethodPanel h2{margin:6px 0 18px;color:#173b55}.paymentMethodChoices{display:grid;gap:10px}.paymentMethodChoice{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:12px;padding:15px;border:1px solid rgba(75,151,189,.16);border-radius:16px;background:#fff;cursor:pointer;transition:.18s ease}.paymentMethodChoice:hover,.paymentMethodChoice.active{border-color:rgba(37,161,207,.45);background:#f3fbfe;box-shadow:0 10px 24px rgba(49,133,170,.07)}.paymentMethodChoice input{accent-color:#249fcf}.paymentMethodChoice>span:last-child{display:flex;flex-direction:column;gap:2px}.paymentMethodChoice strong{color:#173b55}.paymentMethodChoice small{color:#78909f}.paymentMethodIcon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#eaf7fc;color:#1681aa;font-weight:900}.paymentContinue{width:100%;margin-top:18px;min-height:50px}.paymentStatus{display:none;margin:12px 0 0;padding:12px 14px;border-radius:13px;background:#fff7e7;color:#93651d;font-size:13px;line-height:1.5}.paymentStatus.show{display:block}.paymentTrust{margin-top:18px;padding-top:18px;border-top:1px solid rgba(75,151,189,.12);display:flex;flex-direction:column;gap:6px}.paymentTrust strong{font-size:13px;color:#173b55}.paymentTrust span{font-size:12px;line-height:1.55;color:#78909f}
@media(max-width:860px){.paymentLayout{grid-template-columns:1fr}.paymentMethodPanel{position:static}.ckDomainCard{grid-template-columns:1fr}.ckDomainPrice{align-items:flex-start}.ckDomainAddMore{align-items:flex-start;flex-direction:column}}
@media(max-width:640px){.domainConfigurator{padding:22px 16px;border-radius:22px}.domain-search__form--configured{flex-direction:column}.domain-name-composer{min-height:52px}.domain-tld-select{min-width:100px}.paymentPanel,.paymentMethodPanel{padding:20px;border-radius:20px}.paymentOrderHead,.paymentItem{flex-direction:column}.paymentItem>b{text-align:left}}
/* ==========================================================
SU-IT V148 – Checkout spacing / classic framing
----------------------------------------------------------
Ziel: ruhiger, klassischer Checkout mit echten Innenabständen.
Keine Logikänderung – nur Layout/Visuals.
========================================================== */
.checkoutPage .checkoutWizard{
padding:32px;
border:1px solid #d9e7ee;
border-radius:20px;
overflow:visible;
box-shadow:0 14px 38px rgba(44,83,104,.08);
background:#fff;
}
.checkoutPage .checkoutSteps{
justify-content:flex-start;
gap:8px;
margin:0 0 28px;
padding:0;
}
.checkoutPage .checkoutSteps li{
border-radius:10px;
padding:9px 14px 9px 9px;
border-color:#dce8ee;
box-shadow:none;
}
.checkoutPage .checkoutSteps li.active{
background:#63c0e6;
border-color:#63c0e6;
box-shadow:none;
}
.checkoutPage .checkoutBody{
grid-template-columns:minmax(0,1fr) 320px;
gap:24px;
}
.checkoutPage .checkoutPanel{
padding:32px;
border:1px solid #dce8ee;
border-radius:16px;
box-shadow:none;
}
.checkoutPage .checkoutAside{
border-left:0;
background:transparent;
}
.checkoutPage .checkoutMiniSummary{
padding:24px;
border:1px solid #dce8ee;
border-radius:16px;
background:#f8fbfd;
box-shadow:none;
}
.checkoutPage .checkoutNav{
margin-top:24px;
padding-top:24px;
border-top:1px solid #e4edf2;
}
.checkoutPage .checkoutNav .ghost,
.checkoutPage .checkoutNav .glass{
min-width:108px;
min-height:46px;
border-radius:10px;
}
.checkoutPage .checkoutFields input,
.checkoutPage .checkoutFields select,
.checkoutPage .checkoutFields textarea{
border-radius:9px !important;
}
@media(max-width:900px){
.checkoutPage .checkoutWizard{padding:22px}
.checkoutPage .checkoutPanel{padding:24px}
.checkoutPage .checkoutSteps{justify-content:flex-start}
}
@media(max-width:600px){
.checkoutPage .checkoutWizard{padding:16px;border-radius:14px}
.checkoutPage .checkoutPanel{padding:20px;border-radius:12px}
.checkoutPage .checkoutMiniSummary{padding:18px;border-radius:12px}
.checkoutPage .checkoutNav{padding-top:18px}
}
/* V149 – Domains hero: compact glass price card */
body.domainsPage .pageHero.domainsHero{
padding:44px 0 48px;
min-height:0;
}
body.domainsPage .pageHero.domainsHero .shell{
grid-template-columns:minmax(0,1fr) minmax(360px,42%);
gap:46px;
align-items:center;
}
body.domainsPage .pageHero.domainsHero .shell::after{display:none!important;content:none!important}
body.domainsPage .pageHero.domainsHero .crumbs{margin-bottom:14px}
body.domainsPage .pageHero.domainsHero h1{
font-size:clamp(48px,5.4vw,76px)!important;
margin:5px 0 16px;
}
body.domainsPage .pageHero.domainsHero p{
font-size:18px;
line-height:1.6;
max-width:650px;
}
body.domainsPage .domainHeroGlass{
grid-column:2;
grid-row:1 / span 5;
align-self:center;
position:relative;
overflow:hidden;
min-height:280px;
padding:26px;
border-radius:28px;
border:1px solid rgba(255,255,255,.86);
background:
linear-gradient(145deg,rgba(255,255,255,.56),rgba(255,255,255,.25)),
radial-gradient(circle at 15% 10%,rgba(134,223,255,.28),transparent 36%),
radial-gradient(circle at 90% 90%,rgba(115,102,240,.16),transparent 40%);
-webkit-backdrop-filter:blur(24px) saturate(145%);
backdrop-filter:blur(24px) saturate(145%);
box-shadow:0 22px 60px rgba(45,110,145,.14),inset 0 1px 0 rgba(255,255,255,.96);
}
body.domainsPage .domainHeroGlass::before{
content:"";
position:absolute;
width:170px;height:170px;
right:-55px;top:-60px;
border-radius:50%;
background:radial-gradient(circle,rgba(106,137,246,.24),transparent 68%);
pointer-events:none;
}
body.domainsPage .domainHeroGlass__top{
position:relative;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:20px;
}
body.domainsPage .domainHeroGlass__eyebrow{
display:block;
margin-bottom:5px;
color:#4388a9;
font-size:11px;
font-weight:850;
letter-spacing:.1em;
text-transform:uppercase;
}
body.domainsPage .domainHeroGlass__top strong{
display:block;
color:#173b55;
font-size:22px;
letter-spacing:-.025em;
}
body.domainsPage .domainHeroGlass__live{
display:inline-flex;
align-items:center;
gap:7px;
white-space:nowrap;
padding:7px 10px;
border:1px solid rgba(94,173,207,.2);
border-radius:999px;
background:rgba(255,255,255,.46);
color:#54788d;
font-size:11px;
font-weight:750;
}
body.domainsPage .domainHeroGlass__live i{
width:7px;height:7px;border-radius:50%;background:#50c7a8;
box-shadow:0 0 0 4px rgba(80,199,168,.12);
}
body.domainsPage .domainHeroPrices{
position:relative;
display:grid;
grid-template-columns:1fr 1fr;
gap:9px;
}
body.domainsPage .domainHeroPrices>div{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
padding:12px 13px;
border:1px solid rgba(255,255,255,.82);
border-radius:15px;
background:rgba(255,255,255,.43);
box-shadow:inset 0 1px 0 rgba(255,255,255,.76);
}
body.domainsPage .domainHeroPrices b{color:#173b55;font-size:16px}
body.domainsPage .domainHeroPrices span{color:#315f77;font-weight:850;font-size:13px}
body.domainsPage .domainHeroPrices small{color:#7890a0;font-weight:650;font-size:10px}
body.domainsPage .domainHeroGlass__action{
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
margin-top:14px;
padding:12px 14px;
border:1px solid rgba(255,255,255,.85);
border-radius:15px;
background:rgba(255,255,255,.52);
color:#194862;
font-weight:850;
transition:transform .2s ease,background .2s ease;
}
body.domainsPage .domainHeroGlass__action:hover{transform:translateY(-1px);background:rgba(255,255,255,.72)}
body.domainsPage .domainHeroGlass__action span{font-size:20px;line-height:1}
body.domainsPage .domainHeroGlass__note{
position:relative;
display:block;
margin-top:10px;
color:#7890a0;
font-size:10.5px;
line-height:1.45;
}
body.domainsPage .section.soft{padding-top:58px!important}
body.domainsPage .domainConfigurator{
padding:30px 32px;
border-radius:24px;
background:rgba(255,255,255,.66);
-webkit-backdrop-filter:blur(16px);
backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,.9);
box-shadow:0 18px 48px rgba(38,86,112,.075),inset 0 1px 0 rgba(255,255,255,.9);
}
body.domainsPage .domainConfigurator__intro{margin-bottom:22px}
body.domainsPage .domainConfigurator__intro h2{font-size:clamp(27px,3.5vw,40px)}
@media(max-width:900px){
body.domainsPage .pageHero.domainsHero .shell{grid-template-columns:1fr;gap:26px}
body.domainsPage .domainHeroGlass{grid-column:1;grid-row:auto;min-height:0}
}
@media(max-width:560px){
body.domainsPage .pageHero.domainsHero{padding:34px 0 38px}
body.domainsPage .domainHeroGlass{padding:20px;border-radius:22px}
body.domainsPage .domainHeroGlass__top{flex-direction:column}
body.domainsPage .domainHeroPrices{grid-template-columns:1fr}
body.domainsPage .domainConfigurator{padding:22px 16px}
}
/* =========================================================
V150 — Compact service heroes + SU-IT glass information rail
--------------------------------------------------------- */
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) .pageHero{
padding:42px 0 48px!important;
min-height:auto!important;
}
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) .pageHero .shell{
grid-template-columns:minmax(0,1.04fr) minmax(300px,.72fr)!important;
gap:42px!important;
align-items:center!important;
}
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) .pageHero .shell::after{
min-height:258px!important;
max-height:318px!important;
height:318px!important;
align-self:center!important;
border-radius:24px!important;
box-shadow:0 20px 52px rgba(38,104,136,.13),inset 0 1px 0 rgba(255,255,255,.88)!important;
}
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) .pageHero .crumbs{
margin-bottom:12px!important;
}
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) .pageHero .k{
margin-bottom:6px!important;
}
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) .pageHero h1{
font-size:clamp(43px,4.75vw,66px)!important;
margin:6px 0 14px!important;
max-width:690px!important;
}
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) .pageHero p{
font-size:17px!important;
line-height:1.62!important;
max-width:650px!important;
}
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) .pageHero .heroActions{
margin-top:20px!important;
}
/* Lightweight liquid-glass rail. It intentionally sits close to the hero
and is used as useful information rather than decoration. */
.serviceSignalWrap{
position:relative;
z-index:5;
margin-top:-22px;
padding:0 0 28px;
}
.serviceSignalRail{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
padding:12px;
border:1px solid rgba(255,255,255,.82);
border-radius:24px;
background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(238,249,255,.50));
backdrop-filter:blur(24px) saturate(135%);
-webkit-backdrop-filter:blur(24px) saturate(135%);
box-shadow:0 18px 50px rgba(42,108,140,.10),inset 0 1px 0 rgba(255,255,255,.92);
}
.serviceSignal{
min-height:112px;
padding:18px 18px 16px;
border-radius:18px;
border:1px solid rgba(78,168,207,.12);
background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(247,252,255,.42));
box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.serviceSignal:hover{
transform:translateY(-2px);
border-color:color-mix(in srgb,var(--service-a) 28%,transparent);
box-shadow:0 14px 30px rgba(49,113,145,.09),inset 0 1px 0 rgba(255,255,255,.86);
}
.serviceSignal small{
display:flex;
align-items:center;
gap:7px;
margin-bottom:8px;
color:color-mix(in srgb,var(--service-a) 82%,#315b72);
font-size:10px;
line-height:1;
font-weight:850;
letter-spacing:.12em;
text-transform:uppercase;
}
.serviceSignal small::before{
content:"";
width:7px;
height:7px;
border-radius:50%;
background:linear-gradient(135deg,var(--service-a),var(--service-b));
box-shadow:0 0 0 4px color-mix(in srgb,var(--service-a) 10%,transparent);
}
.serviceSignal strong{
display:block;
margin:0 0 5px;
color:#244f67;
font-size:18px;
letter-spacing:-.015em;
}
.serviceSignal span{
display:block;
color:#6b8798;
font-size:13px;
line-height:1.45;
}
/* Slightly tighter section rhythm on standard service pages. */
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) > main > .section{
padding-top:68px;
padding-bottom:68px;
}
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) .center{
margin-bottom:34px;
}
@media(max-width:1024px){
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) .pageHero .shell{
grid-template-columns:minmax(0,1fr) minmax(250px,.68fr)!important;
gap:28px!important;
}
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) .pageHero .shell::after{
height:270px!important;
min-height:250px!important;
}
}
@media(max-width:760px){
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) .pageHero{
padding:34px 0 38px!important;
}
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) .pageHero .shell{
grid-template-columns:1fr!important;
gap:20px!important;
}
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) .pageHero .shell::after{
height:215px!important;
min-height:215px!important;
}
.serviceSignalWrap{margin-top:-12px;padding-bottom:18px}
.serviceSignalRail{grid-template-columns:1fr;padding:9px;border-radius:19px}
.serviceSignal{min-height:0;padding:15px;border-radius:15px}
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) > main > .section{
padding-top:54px;
padding-bottom:54px;
}
}
/* =========================================================
V151 — Voice page refinements
--------------------------------------------------------- */
body.voicePage .pageHero .shell::after{
background-position:50% 20%!important;
height:300px!important;
min-height:300px!important;
max-height:300px!important;
}
body.voicePage .pageHero p{
max-width:720px!important;
}
/* Make the tariff slider feel free-floating instead of boxed in. */
body.voicePage #voiceTariffGrid.edgeScrollGrid{
width:calc(100% + 120px);
margin-left:0;
margin-right:-120px;
padding:8px 120px 22px 2px;
overflow-x:auto;
overflow-y:visible;
scroll-padding-right:120px;
}
body.voicePage #voiceTariffGrid.edgeScrollGrid .tariffCard{
flex:0 0 280px;
}
@media(max-width:1100px){
body.voicePage #voiceTariffGrid.edgeScrollGrid{
width:100%;
margin-right:0;
padding-right:8px;
}
}
/* Remove the boxed panel look in the 'Für wen geeignet' area. */
body.voicePage .voiceForWhoPanel{
max-width:880px!important;
margin:0 auto!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
text-align:left!important;
}
body.voicePage .voiceForWhoPanel h2{
font-size:34px!important;
margin:0 0 16px!important;
letter-spacing:-.03em!important;
}
body.voicePage .voiceForWhoPanel p{
max-width:760px;
font-size:18px!important;
line-height:1.9!important;
color:#627f90!important;
}
body.voicePage .voiceForWhoPanel .priceNote{
display:block!important;
margin-top:14px!important;
padding:0!important;
border-radius:0!important;
background:transparent!important;
color:#2d90bb!important;
font-size:16px!important;
font-weight:700!important;
letter-spacing:0!important;
}
@media(max-width:760px){
body.voicePage .pageHero .shell::after{
background-position:50% 24%!important;
height:240px!important;
min-height:240px!important;
max-height:240px!important;
}
body.voicePage .voiceForWhoPanel h2{
font-size:28px!important;
}
body.voicePage .voiceForWhoPanel p,
body.voicePage .voiceForWhoPanel .priceNote{
font-size:16px!important;
line-height:1.75!important;
}
}
/* =========================================================
V152 — Voice hero / rail / editorial cleanup
--------------------------------------------------------- */
body.voicePage .pageHero .shell{
grid-template-columns:minmax(0,1fr) minmax(410px,.88fr)!important;
gap:46px!important;
}
body.voicePage .pageHero .shell::after{
background-position:center center!important;
height:360px!important;
min-height:360px!important;
max-height:360px!important;
border-radius:28px!important;
}
/* The info rail should sit cleanly below the hero, not overlap awkwardly. */
body.voicePage .serviceSignalWrap{
margin-top:0!important;
padding-top:18px!important;
padding-bottom:30px!important;
background:#fff;
}
body.voicePage .serviceSignalRail{
padding:14px!important;
border-radius:26px!important;
box-shadow:0 16px 40px rgba(42,108,140,.08),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
/* More classic, Apple-like editorial block instead of a card. */
body.voicePage .voiceForWhoPanel.detailPanel{
max-width:940px!important;
margin:0 auto!important;
padding:0!important;
border:0!important;
outline:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
text-align:center!important;
}
body.voicePage .voiceForWhoPanel .k{
margin:0 0 10px!important;
text-align:center!important;
}
body.voicePage .voiceForWhoPanel h2{
font-size:clamp(40px,4.8vw,58px)!important;
line-height:1.04!important;
letter-spacing:-.045em!important;
margin:0 0 18px!important;
text-align:center!important;
color:#173b55!important;
}
body.voicePage .voiceForWhoPanel p:not(.k):not(.priceNote){
max-width:780px!important;
margin:0 auto!important;
font-size:19px!important;
line-height:1.85!important;
color:#678396!important;
text-align:center!important;
}
body.voicePage .voiceForWhoPanel .priceNote{
display:block!important;
margin:18px auto 0!important;
padding:0!important;
background:transparent!important;
border-radius:0!important;
font-size:15px!important;
line-height:1.6!important;
text-align:center!important;
color:#2b93bf!important;
}
@media(max-width:1100px){
body.voicePage .pageHero .shell{
grid-template-columns:minmax(0,1fr) minmax(320px,.82fr)!important;
gap:34px!important;
}
body.voicePage .pageHero .shell::after{
height:320px!important;
min-height:320px!important;
max-height:320px!important;
}
}
@media(max-width:760px){
body.voicePage .pageHero .shell::after{
height:250px!important;
min-height:250px!important;
max-height:250px!important;
}
body.voicePage .serviceSignalWrap{
padding-top:14px!important;
padding-bottom:20px!important;
}
body.voicePage .voiceForWhoPanel h2{
font-size:32px!important;
}
body.voicePage .voiceForWhoPanel p:not(.k):not(.priceNote){
font-size:16.5px!important;
line-height:1.75!important;
}
body.voicePage .voiceForWhoPanel .priceNote{
font-size:14px!important;
}
}
/* =========================================================
V153 — Voice editorial spacing + gradient title
--------------------------------------------------------- */
body.voicePage .voiceForWhoPanel .k{
display:block!important;
width:100%!important;
text-align:center!important;
font-size:12px!important;
letter-spacing:.11em!important;
color:#6b8799!important;
margin:0 0 14px!important;
}
body.voicePage .voiceForWhoPanel h2{
background:linear-gradient(100deg,#173b55 0%,#2f6d9b 34%,#5d8de7 68%,#9d6ef0 100%)!important;
-webkit-background-clip:text!important;
background-clip:text!important;
color:transparent!important;
}
body.voicePage .voiceForWhoPanel .priceNote{
margin-top:24px!important;
}
/* Give the two sections more breathing room so they don't feel stacked. */
body.voicePage .voiceForWhoPanel{
max-width:980px!important;
}
body.voicePage section.section.soft:has(.voiceForWhoPanel){
padding-top:84px!important;
padding-bottom:84px!important;
}
body.voicePage section.section:has(.wireScene){
padding-top:84px!important;
}
@media(max-width:760px){
body.voicePage section.section.soft:has(.voiceForWhoPanel){
padding-top:62px!important;
padding-bottom:62px!important;
}
body.voicePage section.section:has(.wireScene){
padding-top:62px!important;
}
body.voicePage .voiceForWhoPanel .k{
margin-bottom:10px!important;
}
}
/* =========================================================
V154 — Unified overview imagery + voice add-on cleanup
--------------------------------------------------------- */
/* Fix overview hero images to one consistent, larger size on
Infrastructure / Security / Workplace / Business / Connect. */
body.overviewPage .pageHero .shell::after{
width:min(42%,500px)!important;
height:320px!important;
min-height:320px!important;
max-height:320px!important;
border-radius:30px!important;
background-position:center center!important;
}
body.overviewPage .pageHero .shell>*{
max-width:54%!important;
}
/* Keep service tiles visually consistent. */
body.overviewPage .serviceGrid{
align-items:stretch!important;
}
body.overviewPage .serviceCard{
display:flex!important;
flex-direction:column!important;
min-height:100%!important;
}
body.overviewPage .serviceCard img{
width:100%!important;
height:240px!important;
min-height:240px!important;
object-fit:cover!important;
object-position:center center!important;
}
body.overviewPage .serviceBody{
display:flex;
flex-direction:column;
flex:1;
}
body.overviewPage .serviceBody .ghost,
body.overviewPage .serviceBody .glass{
margin-top:auto!important;
align-self:flex-start;
}
/* Standard service detail heroes slightly larger and consistent. */
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) .pageHero .shell{
grid-template-columns:minmax(0,1fr) minmax(430px,.92fr)!important;
}
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) .pageHero .shell::after{
height:360px!important;
min-height:360px!important;
max-height:360px!important;
border-radius:28px!important;
background-position:center center!important;
}
/* Voice gets the largest hero image. */
body.voicePage .pageHero .shell{
grid-template-columns:minmax(0,1fr) minmax(455px,.96fr)!important;
}
body.voicePage .pageHero .shell::after{
height:390px!important;
min-height:390px!important;
max-height:390px!important;
}
/* Voice add-on options: informational only, not a standalone order product. */
.addonInfoGrid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
max-width:860px;
margin:0 auto;
}
.addonInfoCard{
padding:24px 22px;
border-radius:24px;
border:1px solid rgba(112,182,215,.18);
background:linear-gradient(180deg,#fff,#f9fcff);
box-shadow:0 16px 42px rgba(52,113,143,.08);
display:flex;
flex-direction:column;
}
.addonInfoMeta{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:10px;
}
.addonInfoCard h3{
margin:0;
font-size:23px;
color:#173b55;
}
.addonPrice{
white-space:nowrap;
font-size:15px;
font-weight:850;
color:#278bb8;
}
.addonInfoCard p{
margin:0 0 12px;
color:#678396;
line-height:1.65;
}
.addonInfoCard ul{
list-style:none;
padding:0;
margin:0 0 14px;
display:grid;
gap:8px;
}
.addonInfoCard li{
position:relative;
padding-left:20px;
color:#44677d;
font-size:14px;
}
.addonInfoCard li:before{
content:"✓";
position:absolute;
left:0;
color:#2fb3a3;
font-weight:900;
}
.addonOnlyNote{
margin-top:auto;
padding:12px 14px;
border-radius:16px;
background:#f2f9fd;
color:#457188;
font-size:13px;
line-height:1.55;
border:1px solid rgba(95,171,205,.14);
}
.addonHint{
max-width:820px;
margin:18px auto 0;
text-align:center;
color:#698496;
font-size:14px;
line-height:1.65;
}
@media(max-width:1024px){
body.overviewPage .pageHero .shell::after{
width:min(41%,420px)!important;
height:290px!important;
min-height:290px!important;
max-height:290px!important;
}
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) .pageHero .shell{
grid-template-columns:minmax(0,1fr) minmax(330px,.78fr)!important;
}
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) .pageHero .shell::after{
height:320px!important;
min-height:320px!important;
max-height:320px!important;
}
body.voicePage .pageHero .shell::after{
height:340px!important;
min-height:340px!important;
max-height:340px!important;
}
}
@media(max-width:760px){
body.overviewPage .pageHero .shell::after,
body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage) .pageHero .shell::after,
body.voicePage .pageHero .shell::after{
height:250px!important;
min-height:250px!important;
max-height:250px!important;
}
.addonInfoGrid{
grid-template-columns:1fr;
}
}
/* =========================================================
V155 — Connect classic showcase page
--------------------------------------------------------- */
body.connectPage .connectClassicHero .shell{
padding-top:10px;
padding-bottom:22px;
}
body.connectPage .connectHeroIntro{max-width:980px}
body.connectPage .connectClassicHero h1{margin-bottom:16px!important}
body.connectPage .connectClassicHero .lead{max-width:980px;font-size:20px;line-height:1.7}
body.connectPage .connectClassicStatement{max-width:980px}
body.connectPage .connectClassicStatement h2{font-size:clamp(42px,5.1vw,72px);line-height:1.03;letter-spacing:-.05em}
body.connectPage .connectShowcaseSection{padding-top:34px}
body.connectPage .connectShowcaseGrid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
}
body.connectPage .connectShowcaseCard{
position:relative;
display:grid;
overflow:hidden;
border-radius:32px;
border:1px solid rgba(141,198,224,.18);
background:linear-gradient(180deg,#fff,#f7fbfe);
box-shadow:0 22px 56px rgba(43,108,139,.10);
color:#163a53;
min-height:100%;
}
body.connectPage .connectShowcaseCard:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(43,108,139,.15)}
body.connectPage .connectShowcaseWide{
grid-column:span 3;
grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);
min-height:440px;
}
body.connectPage .connectShowcaseMini{
grid-column:span 1;
grid-template-rows:200px auto;
min-height:430px;
}
body.connectPage .connectShowcaseCopy{
padding:34px 34px 30px;
display:flex;
flex-direction:column;
justify-content:center;
gap:12px;
position:relative;
z-index:1;
}
body.connectPage .connectShowcaseCopy span{
display:block;
color:#57acd5;
font-size:12px;
font-weight:900;
letter-spacing:.14em;
text-transform:uppercase;
}
body.connectPage .connectShowcaseCopy h3{
margin:0;
font-size:clamp(30px,3vw,48px);
line-height:1.04;
letter-spacing:-.04em;
color:#163b55;
}
body.connectPage .connectShowcaseMini .connectShowcaseCopy h3{font-size:30px}
body.connectPage .connectShowcaseCopy p{
margin:0;
color:#688396;
line-height:1.72;
font-size:17px;
}
body.connectPage .connectShowcaseCopy strong{
display:inline-flex;
align-items:center;
gap:8px;
margin-top:4px;
color:#268ebb;
font-size:15px;
}
body.connectPage .connectShowcaseMedia{position:relative;min-height:100%}
body.connectPage .connectShowcaseMedia img{
width:100%;
height:100%;
min-height:100%;
object-fit:cover;
object-position:center;
display:block;
}
body.connectPage .connectShowcaseMedia:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(10,45,66,.06),rgba(10,45,66,.14));
}
body.connectPage .connectTagRow{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
body.connectPage .connectTagRow b{
display:inline-flex;
align-items:center;
min-height:32px;
padding:0 12px;
border-radius:999px;
background:rgba(240,249,254,.9);
border:1px solid rgba(113,184,213,.18);
color:#38627a;
font-size:12px;
font-weight:800;
}
body.connectPage .connectQuickLinks{background:linear-gradient(180deg,#f1fbff,#fbfeff 52%,#eef9ff)}
body.connectPage .connectPillGrid{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:16px;
}
body.connectPage .connectPillCard{
display:flex;
flex-direction:column;
gap:8px;
padding:22px 20px;
border-radius:24px;
border:1px solid rgba(128,192,220,.18);
background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,251,255,.98));
box-shadow:0 16px 42px rgba(53,112,144,.08);
}
body.connectPage .connectPillCard:hover{transform:translateY(-4px)}
body.connectPage .connectPillCard span{
width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--themeA),var(--themeB));color:#fff;font-size:12px;font-weight:900;
}
body.connectPage .connectPillCard strong{font-size:21px;color:#173b55}
body.connectPage .connectPillCard small{color:#6a8698;line-height:1.6;font-size:13px}
@media(max-width:1080px){
body.connectPage .connectShowcaseWide{grid-template-columns:1fr;min-height:unset}
body.connectPage .connectShowcaseWide .connectShowcaseMedia{min-height:280px}
body.connectPage .connectPillGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
body.connectPage .connectShowcaseGrid{grid-template-columns:1fr}
body.connectPage .connectShowcaseWide,
body.connectPage .connectShowcaseMini{grid-column:span 1}
body.connectPage .connectShowcaseMini{grid-template-rows:220px auto;min-height:unset}
}
@media(max-width:680px){
body.connectPage .connectClassicHero .lead{font-size:18px}
body.connectPage .connectShowcaseCopy{padding:24px 22px}
body.connectPage .connectShowcaseCopy h3{font-size:28px!important}
body.connectPage .connectPillGrid{grid-template-columns:1fr}
}
/* =========================================================
V156 — Connect hero aligned with the other overview pages
--------------------------------------------------------- */
body.connectPage .connectSystemHero{
position:relative;
isolation:isolate;
min-height:650px;
padding:76px 0 84px;
overflow:hidden;
background-image:url('images/connect-hero-network.png');
background-size:cover;
background-repeat:no-repeat;
background-position:left top;
background-color:#d9f2fb;
}
body.connectPage .connectSystemHero::before{
content:"";
position:absolute;
z-index:-1;
inset:0;
background:
linear-gradient(90deg,
rgba(238,248,252,.52) 0%,
rgba(232,245,251,.36) 28%,
rgba(214,238,248,.16) 56%,
rgba(8,53,80,.06) 100%),
linear-gradient(180deg,rgba(255,255,255,.03),rgba(7,45,70,.12));
pointer-events:none;
}
body.connectPage .connectSystemHeroShell{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(430px,.82fr);
gap:64px;
align-items:center;
min-height:490px;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
}
body.connectPage .connectSystemHeroShell:before{
display:none;
}
body.connectPage .connectSystemCopy{position:relative;z-index:2}
body.connectPage .connectSystemCopy::before{
content:"";
position:absolute;
z-index:-1;
inset:-34px -42px -34px -46px;
border-radius:50%;
background:radial-gradient(ellipse at 42% 48%,rgba(241,250,253,.62) 0%,rgba(233,246,251,.34) 48%,rgba(233,246,251,0) 74%);
filter:blur(7px);
pointer-events:none;
}
body.connectPage .connectSystemCopy .crumbs{margin-bottom:22px}
body.connectPage .connectSystemCopy .k{color:#5f869b;margin-bottom:16px}
body.connectPage .connectSystemCopy h1{
margin:0 0 22px;
font-size:clamp(64px,6.5vw,94px);
line-height:.95;
letter-spacing:-.06em;
background:linear-gradient(90deg,#6ccdf2 0%,#57bde8 18%,#3f9ed2 40%,#2f78ad 68%,#89defd 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
filter:drop-shadow(0 8px 18px rgba(21,76,110,.22));
}
body.connectPage .connectSystemCopy h1 span{
color:transparent;
-webkit-text-fill-color:transparent;
}
body.connectPage .connectSystemCopy .lead{
max-width:690px;
font-size:19px;
line-height:1.72;
color:#2f5f79;
text-shadow:0 1px 14px rgba(255,255,255,.52);
}
body.connectPage .connectHeroGlass{
position:relative;
overflow:hidden;
min-height:390px;
padding:25px;
border-radius:30px;
border:1px solid rgba(255,255,255,.90);
background:
linear-gradient(145deg,rgba(255,255,255,.68),rgba(238,249,253,.34)),
radial-gradient(circle at 15% 8%,rgba(104,211,187,.28),transparent 35%),
radial-gradient(circle at 88% 90%,rgba(94,165,255,.20),transparent 42%);
backdrop-filter:blur(28px) saturate(145%);
-webkit-backdrop-filter:blur(28px) saturate(145%);
box-shadow:0 24px 68px rgba(20,72,101,.18),inset 0 1px 0 rgba(255,255,255,.98);
}
body.connectPage .connectHeroGlass:before{
content:"";position:absolute;width:190px;height:190px;right:-62px;top:-72px;border-radius:50%;
background:radial-gradient(circle,rgba(94,165,255,.25),transparent 68%);pointer-events:none;
}
body.connectPage .connectHeroGlassTop{
position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px;
}
body.connectPage .connectHeroGlassTop span{display:block;color:#4b8ba4;font-size:11px;font-weight:900;letter-spacing:.12em}
body.connectPage .connectHeroGlassTop strong{display:block;margin-top:5px;color:#173b55;font-size:25px;letter-spacing:-.03em}
body.connectPage .connectLiveDot{width:11px;height:11px;border-radius:50%;background:#58cdb2;box-shadow:0 0 0 7px rgba(88,205,178,.12);margin:8px 8px 0 0;animation:connectDotPulse 2.4s ease-in-out infinite}
@keyframes connectDotPulse{50%{transform:scale(1.15);box-shadow:0 0 0 12px rgba(88,205,178,.06)}}
body.connectPage .connectGlassItems{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:12px}
body.connectPage .connectGlassItem{
min-height:112px;padding:17px;border-radius:19px;border:1px solid rgba(255,255,255,.84);
background:rgba(255,255,255,.48);box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 12px 28px rgba(53,112,144,.06);
display:flex;flex-direction:column;justify-content:flex-end;transition:transform .3s ease,background .3s ease,box-shadow .3s ease;
}
body.connectPage .connectGlassItem b{color:#1b4961;font-size:18px;letter-spacing:-.02em}
body.connectPage .connectGlassItem small{margin-top:5px;color:#718b9a;line-height:1.45}
body.connectPage .connectGlassItem:hover{background:rgba(255,255,255,.74);box-shadow:0 18px 34px rgba(53,112,144,.10),inset 0 1px 0 rgba(255,255,255,.9)}
body.connectPage .itemInternet{animation:connectFloatA 6.2s ease-in-out infinite alternate}
body.connectPage .itemVoice{animation:connectFloatB 7.3s ease-in-out infinite alternate}
body.connectPage .itemMobile{animation:connectFloatB 6.7s ease-in-out infinite alternate-reverse}
body.connectPage .itemDomains{animation:connectFloatA 7.8s ease-in-out infinite alternate-reverse}
@keyframes connectFloatA{from{transform:translateY(0) rotate(0)}to{transform:translateY(-5px) rotate(-.35deg)}}
@keyframes connectFloatB{from{transform:translateY(-2px) rotate(0)}to{transform:translateY(4px) rotate(.35deg)}}
body.connectPage .connectOrbit{position:absolute;inset:0;pointer-events:none;opacity:.55}
body.connectPage .connectOrbit span{position:absolute;border:1px solid rgba(87,180,200,.18);border-radius:50%;animation:connectOrbitSpin 14s linear infinite}
body.connectPage .connectOrbit span:nth-child(1){width:170px;height:170px;right:-50px;bottom:-65px}
body.connectPage .connectOrbit span:nth-child(2){width:100px;height:100px;left:-34px;top:90px;animation-duration:18s;animation-direction:reverse}
body.connectPage .connectOrbit span:nth-child(3){width:65px;height:65px;right:36%;top:-22px;animation-duration:11s}
@keyframes connectOrbitSpin{to{transform:rotate(360deg)}}
body.connectPage .connectHeroLinkRow{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding:12px 2px 0;color:#758d9b;font-size:12px}
body.connectPage .connectHeroLinkRow a{color:#278eb9;font-weight:850}
@media(max-width:1000px){
body.connectPage .connectSystemHero{
min-height:0;
padding:64px 0 72px;
background-position:left top;
}
body.connectPage .connectSystemHeroShell{grid-template-columns:1fr;gap:34px;padding:0;min-height:0}
body.connectPage .connectHeroGlass{min-height:0;max-width:620px}
}
@media(max-width:620px){
body.connectPage .connectSystemHero{
padding:46px 0 54px;
background-position:14% top;
}
body.connectPage .connectSystemHero::before{
background:linear-gradient(90deg,rgba(247,252,255,.82),rgba(236,248,253,.54));
}
body.connectPage .connectSystemHeroShell{padding:0}
body.connectPage .connectSystemCopy h1{font-size:58px}
body.connectPage .connectGlassItems{grid-template-columns:1fr}
body.connectPage .connectHeroLinkRow{align-items:flex-start;flex-direction:column}
}
/* =========================================================
V157 — New SU-IT brand logo proportions
--------------------------------------------------------- */
.brand img{
width:168px!important;
height:78px!important;
object-fit:contain!important;
object-position:left center!important;
}
.navrow{min-height:88px!important;height:88px!important}
.footLogo{
width:205px!important;
height:auto!important;
object-fit:contain!important;
}
@media(max-width:760px){
.brand img{width:140px!important;height:68px!important}
.navrow{min-height:80px!important;height:80px!important}
.footLogo{width:180px!important}
}
/* =========================================================
V160 — Mont Blanc body typography, original large titles
---------------------------------------------------------
Mont Blanc is used for navigation, copy, controls, cards,
prices and small headings. Large H1/H2 display titles keep
the previous SU-IT type stack and all existing gradients.
The font must be installed/licensed separately; no font
binaries are bundled with the website package.
========================================================= */
:root{
--suit-body-font:Manrope,Arial,"Segoe UI",sans-serif;
--suit-display-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body,
button,input,select,textarea{
font-family:var(--suit-body-font)!important;
}
body :where(p,a,span,small,strong,b,em,i,li,label,button,input,select,textarea,h3,h4,h5,h6){
font-family:var(--suit-body-font)!important;
}
/* Keep the large display typography exactly in the previous family. */
body h1,
body h2{
font-family:var(--suit-display-font)!important;
}
/* Preserve specialized large-title styling while only locking the family. */
body .hero h1,
body .pageHero h1,
body .detailHero h1,
body .center h2,
body .sectionTitle,
body .appleBusinessPage h1,
body .appleBusinessPage h2,
body .microsoftSolutionsPage h1,
body .microsoftSolutionsPage h2,
body .connectClassicStatement h2,
body .voiceForWhoPanel h2{
font-family:var(--suit-display-font)!important;
}
/* =========================================================
V162 — Manrope consistency, black navigation, layout audit,
stronger homepage hero
========================================================= */
/* Header: all menu labels black, active/hover stays subtly branded. */
.topbar .navlink,
.topbar .nav.primary .navlink,
.topbar .nav.utility .navlink{
color:#111820!important;
font-family:var(--suit-body-font)!important;
font-weight:750!important;
}
.topbar .navlink:hover,
.topbar .navitem:focus-within>.navlink,
.topbar .navitem.open>.navlink{
color:#111820!important;
background:rgba(30,150,205,.07)!important;
}
.topbar .dropdown,
.topbar .dropdown a,
.topbar .dropdown b,
.topbar .dropdown small,
.topbar .megaIntro,
.topbar .megaIntro span,
.topbar .megaIntro strong,
.topbar .megaIntro p,
.topbar .megaOverview{
font-family:var(--suit-body-font)!important;
}
/* Enforce Manrope for all UI/copy elements. Older component-specific
families (Josefin Sans, Aptos etc.) must not leak through. */
body :where(
a,button,input,select,textarea,label,
p,li,small,span,strong,b,em,i,
h3,h4,h5,h6,
.glass,.ghost,.shopPrimary,.shopAdd,.tariffAdd,
.tariffCard,.tariffCard *,.quoteCard,.quoteCard *,
.pricingCard,.pricingCard *,.overviewCard,.overviewCard *,
.serviceCard .serviceBody,.serviceCard .serviceBody *,
.worldText,.worldText *,.ctaBand,.ctaBand *,
.cartDrawer,.cartDrawer *,.checkoutPage .checkoutShell,.checkoutPage .checkoutShell *
){
font-family:var(--suit-body-font)!important;
}
/* Large display titles stay Inter, exactly as requested. */
body :where(h1,h2){font-family:var(--suit-display-font)!important}
/* Overview/detail page fit audit: prevent long copy from producing odd
widths/heights while retaining the equal image sizes introduced earlier. */
body.overviewPage .serviceGrid,
body.overviewPage .overviewGrid,
body.servicePage .pricingGrid,
body.servicePage .tariffGrid{
min-width:0!important;
}
body.overviewPage .serviceCard,
body.overviewPage .serviceBody,
body.overviewPage .overviewCard,
body.servicePage .pricingCard,
body.servicePage .tariffCard{
min-width:0!important;
}
body.overviewPage .serviceBody h3,
body.overviewPage .overviewCard h3,
body.servicePage .pricingCard h3,
body.servicePage .tariffCard h3{
overflow-wrap:anywhere;
hyphens:auto;
line-height:1.12!important;
}
body.overviewPage .serviceBody p,
body.overviewPage .overviewCard p,
body.overviewPage .overviewCard li{
overflow-wrap:anywhere;
}
body.overviewPage .serviceBody{padding:22px 23px 24px!important}
body.overviewPage .serviceBody h3{font-size:clamp(23px,2vw,29px)!important}
body.overviewPage .serviceBody p{font-size:15px!important;line-height:1.62!important}
body.overviewPage .section{padding-top:72px!important;padding-bottom:72px!important}
body.overviewPage .center{margin-bottom:34px!important}
/* Preserve equal overview images, but make their crop and card geometry
consistent across Infrastructure/Security/Workplace/Business/Connect. */
body.overviewPage .serviceCard img{
height:240px!important;
min-height:240px!important;
aspect-ratio:16/9;
object-fit:cover!important;
object-position:center!important;
}
/* Homepage hero: stronger branding and readability over the existing video. */
body:not(.servicePage):not(.overviewPage) .hero.videoReady{
background:#eaf7fd!important;
}
body:not(.servicePage):not(.overviewPage) .hero.videoReady .heroWash{
background:
linear-gradient(90deg,rgba(247,253,255,.90) 0%,rgba(239,249,254,.78) 43%,rgba(214,242,253,.49) 69%,rgba(102,205,238,.18) 100%),
radial-gradient(circle at 28% 28%,rgba(64,160,212,.18),transparent 34%),
radial-gradient(circle at 76% 18%,rgba(80,225,218,.22),transparent 30%)!important;
}
.hero.videoReady .heroTitle{
max-width:760px!important;
font-weight:850!important;
letter-spacing:-.06em!important;
filter:drop-shadow(0 10px 24px rgba(19,69,99,.08));
}
.hero.videoReady .heroTitle .tone1,
.hero.videoReady .heroTitle .tone2,
.hero.videoReady .heroTitle .tone3,
.hero.videoReady .heroTitle .tone4{
background:linear-gradient(102deg,#103b58 0%,#236d98 34%,#42a8d8 65%,#51d0c3 86%,#6e84ff 100%)!important;
background-size:180% 100%!important;
-webkit-background-clip:text!important;
background-clip:text!important;
color:transparent!important;
}
.hero.videoReady .heroTitle .tone2{background-position:18% 50%!important}
.hero.videoReady .heroTitle .tone3{background-position:52% 50%!important}
.hero.videoReady .heroTitle .tone4{background-position:86% 50%!important}
.hero.videoReady .lead{
color:#456f86!important;
font-size:20px!important;
line-height:1.68!important;
max-width:760px!important;
font-weight:500!important;
}
.hero.videoReady .k{
color:#159fd0!important;
font-weight:850!important;
}
.hero.videoReady .heroGlassNote{
background:rgba(255,255,255,.66)!important;
border:1px solid rgba(255,255,255,.90)!important;
backdrop-filter:blur(22px) saturate(130%)!important;
box-shadow:0 22px 56px rgba(36,112,150,.14)!important;
}
.hero.videoReady .heroGlassNote strong{color:#173f58!important}
.hero.videoReady .heroGlassNote p{color:#5f8193!important}
@media(max-width:1180px){
body.overviewPage .serviceGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
body.overviewPage .serviceGrid{grid-template-columns:1fr!important}
body.overviewPage .section{padding-top:56px!important;padding-bottom:56px!important}
body.overviewPage .serviceCard img{height:215px!important;min-height:215px!important}
.hero.videoReady .lead{font-size:17px!important}
}
/* =========================================================
V163 — Hero copy sizing + button typography consistency
========================================================= */
/* Make all primary/secondary action buttons use the same typography. */
body :where(.glass,.ghost,.shopPrimary,.shopAdd,.tariffAdd,.qtyBtn,.choiceBtn,.stepBtn,.checkoutBtn,.cartBtn){
font-family:var(--suit-body-font)!important;
font-size:15px!important;
font-weight:800!important;
letter-spacing:0!important;
line-height:1.15!important;
}
body .heroActions :where(.glass,.ghost){
min-width:184px;
}
/* The homepage intro paragraph should be a bit smaller and calmer. */
.hero.videoReady .lead{
font-size:17px!important;
line-height:1.58!important;
max-width:700px!important;
color:#486f85!important;
}
@media(min-width:1180px){
.hero.videoReady .lead{
font-size:18px!important;
}
}
/* =========================================================
V165 — Stronger Microsoft homepage background effects
--------------------------------------------------------- */
body.homePage .microsoftHomeFeature{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 10% 16%, rgba(77,175,241,.14), transparent 24%),
radial-gradient(circle at 24% 82%, rgba(255,182,94,.10), transparent 22%),
radial-gradient(circle at 84% 20%, rgba(129,106,247,.12), transparent 26%),
radial-gradient(circle at 90% 78%, rgba(99,210,178,.12), transparent 24%),
linear-gradient(180deg,#ffffff 0%,#f5fbfe 100%) !important;
}
body.homePage .microsoftHomeFeature::before,
body.homePage .microsoftHomeFeature::after{
filter:blur(78px) !important;
opacity:.78 !important;
}
body.homePage .microsoftHomeFeature::before{
width:420px !important;
height:420px !important;
left:-120px !important;
top:30px !important;
background:radial-gradient(circle,rgba(255,182,94,.20),rgba(255,182,94,0) 70%) !important;
}
body.homePage .microsoftHomeFeature::after{
width:480px !important;
height:480px !important;
right:-150px !important;
bottom:-10px !important;
background:radial-gradient(circle,rgba(94,134,255,.20),rgba(94,134,255,0) 72%) !important;
}
body.homePage .microsoftHomeInner{
position:relative;
overflow:hidden;
}
body.homePage .microsoftHomeInner::before,
body.homePage .microsoftHomeInner::after{
content:"";
position:absolute;
border-radius:50%;
pointer-events:none;
z-index:0;
}
body.homePage .microsoftHomeInner::before{
width:340px;
height:340px;
left:-110px;
top:40px;
background:radial-gradient(circle,rgba(77,175,241,.16),rgba(77,175,241,0) 70%);
filter:blur(18px);
animation:suAuroraShift 12s ease-in-out infinite;
}
body.homePage .microsoftHomeInner::after{
width:300px;
height:300px;
right:18%;
bottom:-120px;
background:radial-gradient(circle,rgba(99,210,178,.14),rgba(99,210,178,0) 72%);
filter:blur(16px);
animation:suAuroraShift 14s ease-in-out infinite reverse;
}
body.homePage .microsoftHomeCopy,
body.homePage .microsoftHomeVisual{
position:relative;
z-index:1;
}
body.homePage .microsoftHomeVisual::before,
body.homePage .microsoftHomeVisual::after{
content:"";
position:absolute;
border-radius:999px;
pointer-events:none;
z-index:0;
}
body.homePage .microsoftHomeVisual::before{
inset:24px auto auto 16px;
width:160px;
height:160px;
background:radial-gradient(circle,rgba(255,255,255,.62),rgba(255,255,255,0) 72%);
filter:blur(10px);
}
body.homePage .microsoftHomeVisual::after{
right:-26px;
bottom:-20px;
width:180px;
height:180px;
background:radial-gradient(circle,rgba(129,106,247,.16),rgba(129,106,247,0) 72%);
filter:blur(12px);
}
body.homePage .microsoftHomeBoard{
overflow:hidden;
}
body.homePage .microsoftHomeBoard::after{
content:"";
position:absolute;
inset:-28% -10% auto auto;
width:220px;
height:220px;
border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.42),rgba(255,255,255,0) 72%);
filter:blur(8px);
z-index:0;
}
body.homePage .microsoftHomeTop,
body.homePage .microsoftHomeTiles,
body.homePage .microsoftHomeFlow{
position:relative;
z-index:1;
}
/* =========================================================
V166 — Connect mini cards cleaner + glassier
--------------------------------------------------------- */
body.connectPage .connectShowcaseMini{
grid-template-rows:minmax(242px,auto) 230px !important;
min-height:472px !important;
background:
radial-gradient(circle at 100% 0%,rgba(141,230,255,.18),transparent 34%),
linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,251,255,.98)) !important;
backdrop-filter:blur(12px);
}
body.connectPage .connectShowcaseMini::before{
content:"";
position:absolute;
inset:12px 12px auto auto;
width:120px;
height:120px;
border-radius:50%;
background:radial-gradient(circle,rgba(125,214,244,.16),rgba(125,214,244,0) 72%);
pointer-events:none;
}
body.connectPage .connectShowcaseMini .connectShowcaseCopy{
justify-content:flex-start !important;
padding:28px 32px 18px !important;
gap:10px !important;
background:linear-gradient(180deg,rgba(255,255,255,.56),rgba(255,255,255,.12));
}
body.connectPage .connectShowcaseMini .connectShowcaseCopy h3{
font-size:26px !important;
line-height:1.06 !important;
letter-spacing:-.035em;
max-width:12ch;
}
body.connectPage .connectShowcaseMini .connectShowcaseCopy p{
font-size:15px !important;
line-height:1.6 !important;
color:#6a8798 !important;
max-width:30ch;
}
body.connectPage .connectShowcaseMini .connectShowcaseCopy strong{
margin-top:auto !important;
align-self:flex-start;
padding:10px 14px;
border-radius:999px;
background:rgba(239,248,253,.92);
border:1px solid rgba(119,188,220,.24);
box-shadow:0 10px 22px rgba(65,122,151,.08);
}
body.connectPage .connectShowcaseMini .connectShowcaseMedia{
min-height:230px !important;
border-top:1px solid rgba(137,197,223,.18);
overflow:hidden;
}
body.connectPage .connectShowcaseMini .connectShowcaseMedia img{
height:230px !important;
min-height:230px !important;
object-position:center center !important;
transform:scale(1.02);
}
body.connectPage .connectShowcaseMini .connectShowcaseMedia::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0) 22%,rgba(13,59,87,.08));
z-index:1;
}
body.connectPage .connectShowcaseMini .connectShowcaseMedia:after{
background:linear-gradient(180deg,rgba(13,59,87,.02),rgba(13,59,87,.14)) !important;
}
@media(max-width:900px){
body.connectPage .connectShowcaseMini{
grid-template-rows:minmax(220px,auto) 220px !important;
min-height:unset !important;
}
body.connectPage .connectShowcaseMini .connectShowcaseCopy{
padding:24px 24px 16px !important;
}
}
/* =========================================================
V167 — Tighter spacing for combo plus-lines
--------------------------------------------------------- */
.comboParts{
gap:2px !important;
margin:0 0 12px !important;
}
.comboParts li{
padding-left:18px !important;
line-height:1.35 !important;
}
.comboParts li + li{
margin-top:0 !important;
}
.comboCard .comboParts{
min-height:66px !important;
}
/* V168 — CMS tax toggle */
html.tax-off .vat{display:none!important}
/* =========================================================
V171 — Workplace consistency + premium glass/cloud polish
========================================================= */
.topbar{
z-index:1200 !important;
isolation:isolate;
background:rgba(255,255,255,.94) !important;
backdrop-filter:blur(22px) saturate(145%) !important;
-webkit-backdrop-filter:blur(22px) saturate(145%) !important;
}
.topbar .navrow,
.topbar .nav,
.topbar .navitem{overflow:visible !important}
.topbar .dropdown.mega{
z-index:2200 !important;
background:linear-gradient(145deg,rgba(255,255,255,.975),rgba(245,251,255,.965)) !important;
border:1px solid rgba(106,177,211,.20) !important;
box-shadow:0 30px 80px rgba(31,83,116,.18),0 8px 28px rgba(51,127,163,.10),inset 0 1px 0 rgba(255,255,255,.95) !important;
backdrop-filter:blur(26px) saturate(155%) !important;
-webkit-backdrop-filter:blur(26px) saturate(155%) !important;
overflow:hidden;
}
.topbar .dropdown.mega::before,
.topbar .dropdown.mega::after{
content:"";
position:absolute;
border-radius:50%;
pointer-events:none;
z-index:0;
filter:blur(18px);
}
.topbar .dropdown.mega::before{
width:230px;height:230px;left:-95px;top:-90px;
background:radial-gradient(circle,rgba(112,215,247,.18),rgba(112,215,247,0) 70%);
}
.topbar .dropdown.mega::after{
width:210px;height:210px;right:-80px;bottom:-100px;
background:radial-gradient(circle,rgba(122,111,255,.11),rgba(122,111,255,0) 72%);
}
.topbar .megaIntro,.topbar .megaLinks{position:relative;z-index:1}
.topbar .megaIntro{
background:linear-gradient(145deg,rgba(235,249,255,.90),rgba(255,255,255,.72)) !important;
border:1px solid rgba(93,181,220,.14) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.topbar .megaLinks a{
border-radius:16px !important;
transition:transform .18s ease,background .18s ease,box-shadow .18s ease !important;
}
.topbar .megaLinks a:hover{
transform:translateY(-2px) !important;
background:rgba(238,249,255,.82) !important;
box-shadow:0 10px 22px rgba(51,119,151,.08) !important;
}
/* Workplace page: cloud / aurora depth */
body.workplacePage{background:#fff;overflow-x:hidden}
body.workplacePage .pageHero{
position:relative;
isolation:isolate;
overflow:hidden;
background:
radial-gradient(ellipse at 14% 20%,rgba(113,214,250,.20),transparent 31%),
radial-gradient(ellipse at 82% 18%,rgba(126,112,255,.15),transparent 29%),
radial-gradient(ellipse at 56% 88%,rgba(116,226,205,.13),transparent 30%),
linear-gradient(180deg,#fbfeff 0%,#edf8ff 100%) !important;
}
body.workplacePage .pageHero::before{
content:"";
position:absolute;
z-index:0;
left:-8%;right:-8%;top:6%;height:72%;
pointer-events:none;
opacity:.82;
background:
radial-gradient(ellipse at 16% 55%,rgba(255,255,255,.94) 0 12%,rgba(216,244,255,.55) 28%,transparent 55%),
radial-gradient(ellipse at 48% 38%,rgba(255,255,255,.88) 0 11%,rgba(207,238,255,.42) 29%,transparent 57%),
radial-gradient(ellipse at 78% 60%,rgba(255,255,255,.90) 0 12%,rgba(220,235,255,.42) 30%,transparent 58%);
filter:blur(26px);
transform:translate3d(0,0,0);
animation:workplaceCloudDrift 17s ease-in-out infinite alternate;
}
body.workplacePage .pageHero::after{
content:"";
position:absolute;
z-index:0;
width:520px;height:520px;right:-160px;top:-180px;
border-radius:50%;
pointer-events:none;
background:radial-gradient(circle,rgba(124,110,255,.16),rgba(93,193,241,.08) 40%,transparent 70%);
filter:blur(16px);
animation:workplaceAuraFloat 12s ease-in-out infinite alternate;
}
body.workplacePage .pageHero .shell{position:relative;z-index:1}
body.workplacePage .connectGlowSection{
position:relative;
isolation:isolate;
overflow:hidden;
background:
radial-gradient(ellipse at 12% 25%,rgba(115,211,247,.16),transparent 28%),
radial-gradient(ellipse at 86% 70%,rgba(125,113,255,.12),transparent 30%),
linear-gradient(180deg,#effaff 0%,#f9fdff 50%,#edf8ff 100%) !important;
}
body.workplacePage .connectGlowSection::before{
content:"";
position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(ellipse at 24% 18%,rgba(255,255,255,.92) 0 8%,transparent 28%),
radial-gradient(ellipse at 68% 42%,rgba(255,255,255,.85) 0 9%,transparent 30%),
radial-gradient(ellipse at 44% 82%,rgba(207,241,255,.38) 0 12%,transparent 34%);
filter:blur(22px);
opacity:.85;
}
body.workplacePage .serviceGrid{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
align-items:stretch;
}
body.workplacePage .serviceCard{
min-height:270px;
padding:30px !important;
background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(246,251,255,.80)) !important;
backdrop-filter:blur(18px) saturate(140%);
-webkit-backdrop-filter:blur(18px) saturate(140%);
border:1px solid rgba(114,184,216,.20) !important;
box-shadow:0 20px 50px rgba(42,105,137,.10),inset 0 1px 0 rgba(255,255,255,.95) !important;
}
body.workplacePage .serviceCard:hover{
transform:translateY(-6px);
box-shadow:0 30px 70px rgba(42,105,137,.16),inset 0 1px 0 rgba(255,255,255,.95) !important;
}
body.workplacePage .workplaceSupportCard .overviewIcon{
background:linear-gradient(135deg,#48c5d8,#6f8eff) !important;
}
@keyframes workplaceCloudDrift{
0%{transform:translate3d(-1.5%,0,0) scale(1)}
100%{transform:translate3d(2.5%,8px,0) scale(1.035)}
}
@keyframes workplaceAuraFloat{
0%{transform:translate3d(0,0,0) scale(1)}
100%{transform:translate3d(-36px,24px,0) scale(1.08)}
}
@media(max-width:900px){
body.workplacePage .serviceGrid{grid-template-columns:1fr !important}
body.workplacePage .serviceCard{min-height:0}
}
@media(prefers-reduced-motion:reduce){
body.workplacePage .pageHero::before,
body.workplacePage .pageHero::after{animation:none !important}
}
/* =========================================================
V172 — Clickable mega intros + Business system hero
========================================================= */
.dropdown.mega{
border-radius:30px !important;
overflow:hidden;
}
.dropdown.mega .megaIntro{
border-radius:24px !important;
}
.dropdown.mega .megaIntroLink{
display:block;
cursor:pointer;
text-decoration:none;
color:inherit;
transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
}
.dropdown.mega .megaIntroLink:hover,
.dropdown.mega .megaIntroLink:focus-visible{
transform:translateY(-2px);
background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,249,253,.96));
box-shadow:0 18px 38px rgba(38,95,126,.11);
outline:none;
}
.dropdown.mega .megaIntroLink .megaOverview{
display:inline-block;
margin-top:14px;
font-style:normal;
color:#278eb9;
font-weight:800;
}
.dropdown.mega .megaLinks>a{border-radius:20px !important}
body.businessPage .businessSystemHero{
position:relative;
overflow:hidden;
padding:46px 0 56px;
background:
radial-gradient(circle at 10% 18%,rgba(255,179,91,.18),transparent 28%),
radial-gradient(circle at 88% 12%,rgba(255,123,138,.14),transparent 30%),
radial-gradient(circle at 78% 88%,rgba(129,106,247,.12),transparent 32%),
linear-gradient(180deg,#fbfdff 0%,#f6fbfe 100%);
}
body.businessPage .businessSystemHero:before,
body.businessPage .businessSystemHero:after{
content:"";position:absolute;border-radius:50%;filter:blur(62px);pointer-events:none;opacity:.7;
}
body.businessPage .businessSystemHero:before{width:340px;height:340px;left:-100px;top:40px;background:rgba(255,179,91,.12)}
body.businessPage .businessSystemHero:after{width:420px;height:420px;right:-130px;bottom:-80px;background:rgba(129,106,247,.10)}
body.businessPage .businessSystemHeroShell{
position:relative;z-index:1;
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr);
gap:44px;
align-items:center;
min-height:520px;
padding:48px 50px;
border-radius:36px;
border:1px solid rgba(145,191,216,.18);
background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(249,253,255,.80));
box-shadow:0 28px 75px rgba(53,104,132,.10);
backdrop-filter:blur(20px);
}
body.businessPage .businessSystemCopy h1{
margin:0 0 22px;
max-width:760px;
font-size:clamp(54px,5.5vw,82px);
line-height:.96;
letter-spacing:-.055em;
background:linear-gradient(100deg,#173b55 0%,#d98743 34%,#f27c8b 64%,#816af7 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.businessPage .businessSystemCopy h1 span{color:#ff8b76;-webkit-text-fill-color:#ff8b76}
body.businessPage .businessSystemCopy .lead{max-width:680px;font-size:18px;line-height:1.72}
body.businessPage .businessHeroGlass{
position:relative;
overflow:hidden;
min-height:410px;
padding:25px;
border-radius:30px;
border:1px solid rgba(255,255,255,.9);
background:
linear-gradient(145deg,rgba(255,255,255,.64),rgba(255,255,255,.30)),
radial-gradient(circle at 12% 8%,rgba(255,179,91,.28),transparent 35%),
radial-gradient(circle at 88% 88%,rgba(129,106,247,.20),transparent 42%);
backdrop-filter:blur(28px) saturate(145%);
-webkit-backdrop-filter:blur(28px) saturate(145%);
box-shadow:0 24px 68px rgba(72,91,139,.14),inset 0 1px 0 rgba(255,255,255,.98);
}
body.businessPage .businessHeroGlass:before{
content:"";position:absolute;width:190px;height:190px;right:-62px;top:-72px;border-radius:50%;
background:radial-gradient(circle,rgba(255,123,138,.22),transparent 68%);pointer-events:none;
}
body.businessPage .businessHeroGlassTop{position:relative;z-index:2;display:flex;justify-content:space-between;gap:18px;margin-bottom:18px}
body.businessPage .businessHeroGlassTop span{display:block;color:#a56b65;font-size:11px;font-weight:900;letter-spacing:.12em}
body.businessPage .businessHeroGlassTop strong{display:block;margin-top:5px;color:#173b55;font-size:24px;letter-spacing:-.03em}
body.businessPage .businessLiveDot{width:11px;height:11px;border-radius:50%;background:#ff9a70;box-shadow:0 0 0 7px rgba(255,154,112,.12);margin:8px 8px 0 0;animation:businessDotPulse 2.4s ease-in-out infinite}
@keyframes businessDotPulse{50%{transform:scale(1.15);box-shadow:0 0 0 12px rgba(255,154,112,.06)}}
body.businessPage .businessGlassItems{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:12px}
body.businessPage .businessGlassItem{
min-height:92px;padding:15px 16px;border-radius:19px;border:1px solid rgba(255,255,255,.84);
background:rgba(255,255,255,.50);box-shadow:inset 0 1px 0 rgba(255,255,255,.84),0 12px 28px rgba(78,91,139,.06);
display:flex;flex-direction:column;justify-content:flex-end;transition:transform .3s ease,background .3s ease,box-shadow .3s ease;
}
body.businessPage .businessGlassItem:last-child{grid-column:1/-1;min-height:78px}
body.businessPage .businessGlassItem b{color:#263e58;font-size:18px;letter-spacing:-.02em}
body.businessPage .businessGlassItem small{margin-top:5px;color:#7b8795;line-height:1.4}
body.businessPage .businessGlassItem:hover{background:rgba(255,255,255,.78);box-shadow:0 18px 34px rgba(78,91,139,.10),inset 0 1px 0 rgba(255,255,255,.92)}
body.businessPage .itemAI,body.businessPage .itemPay,body.businessPage .itemPOS{animation:businessFloatA 6.8s ease-in-out infinite alternate}
body.businessPage .itemAccess,body.businessPage .itemBilling{animation:businessFloatB 7.4s ease-in-out infinite alternate-reverse}
@keyframes businessFloatA{from{transform:translateY(0) rotate(0)}to{transform:translateY(-4px) rotate(-.3deg)}}
@keyframes businessFloatB{from{transform:translateY(-2px) rotate(0)}to{transform:translateY(4px) rotate(.3deg)}}
body.businessPage .businessOrbit{position:absolute;inset:0;pointer-events:none;opacity:.5}
body.businessPage .businessOrbit span{position:absolute;border:1px solid rgba(210,135,142,.16);border-radius:50%;animation:businessOrbitSpin 15s linear infinite}
body.businessPage .businessOrbit span:nth-child(1){width:170px;height:170px;right:-48px;bottom:-66px}
body.businessPage .businessOrbit span:nth-child(2){width:100px;height:100px;left:-34px;top:96px;animation-duration:19s;animation-direction:reverse}
body.businessPage .businessOrbit span:nth-child(3){width:64px;height:64px;right:36%;top:-22px;animation-duration:12s}
@keyframes businessOrbitSpin{to{transform:rotate(360deg)}}
body.businessPage .businessHeroLinkRow{position:relative;z-index:2;display:flex;justify-content:space-between;gap:12px;margin-top:15px;padding:11px 2px 0;color:#7b8795;font-size:12px}
body.businessPage .businessHeroLinkRow a{color:#cc6d60;font-weight:850}
@media(max-width:1000px){body.businessPage .businessSystemHeroShell{grid-template-columns:1fr;gap:32px;padding:40px;min-height:0}}
@media(max-width:620px){
body.businessPage .businessSystemHero{padding:28px 0 38px}
body.businessPage .businessSystemHeroShell{padding:26px 22px;border-radius:28px}
body.businessPage .businessSystemCopy h1{font-size:clamp(44px,14vw,62px)}
body.businessPage .businessGlassItems{grid-template-columns:1fr}
body.businessPage .businessGlassItem:last-child{grid-column:auto}
body.businessPage .businessHeroLinkRow{flex-direction:column;align-items:flex-start}
}
/* =========================================================
V173 — Infrastructure / Security / Workplace system heroes
Same premium glass language as Business + Connect.
========================================================= */
.systemHero{position:relative;overflow:hidden;padding:42px 0 54px;background:linear-gradient(180deg,#f9fdff 0%,#edf8fd 100%)}
.systemHero:before,.systemHero:after{content:"";position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.8;animation:suAuroraShift 12s ease-in-out infinite}
.systemHero:before{width:380px;height:380px;left:-120px;top:20px;background:rgba(89,196,238,.14)}
.systemHero:after{width:460px;height:460px;right:-150px;bottom:-100px;background:rgba(116,132,245,.10);animation-delay:-3s}
.systemHeroShell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(390px,.98fr);gap:40px;align-items:center;min-height:500px;padding:46px 48px;border:1px solid rgba(124,187,216,.19);border-radius:38px;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(247,252,255,.82));box-shadow:0 30px 80px rgba(43,103,135,.10);backdrop-filter:blur(20px);overflow:hidden}
.systemHeroShell:before{content:"";position:absolute;width:360px;height:360px;right:30%;bottom:-220px;border-radius:50%;background:radial-gradient(circle,rgba(134,223,255,.18),transparent 68%);filter:blur(16px);pointer-events:none}
.systemHeroCopy{position:relative;z-index:2}
.systemHeroCopy .crumbs{margin-bottom:24px}
.systemHeroCopy h1{margin:10px 0 18px;font-size:clamp(48px,6vw,78px);line-height:.94;letter-spacing:-.055em;color:#173b55}
.systemHeroCopy .lead{max-width:650px;font-size:18px;line-height:1.65;color:#607f92}
.systemHeroGlass{position:relative;z-index:2;padding:26px;border-radius:32px;border:1px solid rgba(129,190,218,.24);background:linear-gradient(150deg,rgba(255,255,255,.78),rgba(239,249,254,.72));box-shadow:0 26px 68px rgba(46,102,133,.13),inset 0 1px 0 rgba(255,255,255,.85);backdrop-filter:blur(24px) saturate(145%);overflow:hidden}
.systemHeroGlass:before{content:"";position:absolute;width:230px;height:230px;right:-70px;top:-80px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.72),transparent 70%);pointer-events:none}
.systemHeroGlassTop{position:relative;z-index:2;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}
.systemHeroGlassTop span{display:block;font-size:11px;font-weight:900;letter-spacing:.13em;color:#4b9fc5}
.systemHeroGlassTop strong{display:block;margin-top:5px;font-size:23px;line-height:1.12;letter-spacing:-.025em;color:#173b55}
.systemLiveDot{width:11px;height:11px;flex:0 0 11px;margin-top:5px;border-radius:50%;background:#48c7d7;box-shadow:0 0 0 7px rgba(72,199,215,.12),0 0 22px rgba(72,199,215,.45);animation:businessPulse 2.4s ease-in-out infinite}
.systemGlassItems{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.systemGlassItem{position:relative;display:flex;min-height:88px;padding:16px 17px;border-radius:20px;flex-direction:column;justify-content:center;border:1px solid rgba(124,184,215,.20);background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(245,251,255,.70));box-shadow:0 12px 28px rgba(45,103,135,.08);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;overflow:hidden}
.systemGlassItem:after{content:"";position:absolute;inset:auto -25px -35px auto;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(105,202,239,.18),transparent 68%)}
.systemGlassItem:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(45,103,135,.14);border-color:rgba(86,174,215,.38)}
.systemGlassItem b{position:relative;z-index:1;font-size:15px;color:#173b55}
.systemGlassItem small{position:relative;z-index:1;margin-top:4px;font-size:11.5px;line-height:1.45;color:#66849a}
.systemHeroLinkRow{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;padding-top:15px;border-top:1px solid rgba(119,182,213,.18);font-size:12px;color:#6d8999}
.systemHeroLinkRow a{font-weight:800;color:#278db8}
/* Infrastructure: cyan / blue technical palette */
.infraSystemHero{background:radial-gradient(circle at 18% 22%,rgba(68,191,232,.12),transparent 25%),radial-gradient(circle at 86% 72%,rgba(63,124,245,.10),transparent 28%),linear-gradient(180deg,#fbfeff,#eef9fd)}
.infraSystemHero .systemGlassItem:nth-child(1){background:linear-gradient(135deg,rgba(86,194,238,.15),rgba(255,255,255,.82))}
.infraSystemHero .systemGlassItem:nth-child(2){background:linear-gradient(135deg,rgba(74,136,244,.12),rgba(255,255,255,.82))}
.infraSystemHero .systemGlassItem:nth-child(3){background:linear-gradient(135deg,rgba(89,215,199,.12),rgba(255,255,255,.82))}
.infraSystemHero .systemGlassItem:nth-child(4){background:linear-gradient(135deg,rgba(124,112,244,.11),rgba(255,255,255,.82))}
.infraSystemHero .systemGlassItem:nth-child(5){background:linear-gradient(135deg,rgba(79,162,245,.13),rgba(255,255,255,.82));grid-column:span 2}
/* Security: calm blue / violet / green */
.securitySystemHero{background:radial-gradient(circle at 14% 26%,rgba(74,154,230,.12),transparent 27%),radial-gradient(circle at 88% 62%,rgba(113,91,235,.10),transparent 28%),linear-gradient(180deg,#fbfdff,#eff7fc)}
.securitySystemHero .systemLiveDot{background:#5fc99b;box-shadow:0 0 0 7px rgba(95,201,155,.12),0 0 22px rgba(95,201,155,.42)}
.securitySystemHero .systemGlassItem:nth-child(1){background:linear-gradient(135deg,rgba(84,143,240,.14),rgba(255,255,255,.84))}
.securitySystemHero .systemGlassItem:nth-child(2){background:linear-gradient(135deg,rgba(126,105,241,.12),rgba(255,255,255,.84))}
.securitySystemHero .systemGlassItem:nth-child(3){background:linear-gradient(135deg,rgba(95,201,155,.14),rgba(255,255,255,.84));grid-column:span 2}
/* Workplace: Apple/Microsoft inspired soft sky palette */
.workplaceSystemHero{background:radial-gradient(circle at 12% 18%,rgba(104,213,244,.13),transparent 27%),radial-gradient(circle at 86% 26%,rgba(126,114,245,.10),transparent 28%),radial-gradient(circle at 76% 82%,rgba(101,212,178,.09),transparent 26%),linear-gradient(180deg,#fbfeff,#eef9fd)}
.workplaceSystemHero .systemGlassItem:nth-child(1){background:linear-gradient(135deg,rgba(94,182,245,.13),rgba(255,255,255,.84))}
.workplaceSystemHero .systemGlassItem:nth-child(2){background:linear-gradient(135deg,rgba(113,105,245,.12),rgba(255,255,255,.84))}
.workplaceSystemHero .systemGlassItem:nth-child(3){background:linear-gradient(135deg,rgba(99,210,178,.13),rgba(255,255,255,.84));grid-column:span 2}
@media(max-width:1000px){.systemHeroShell{grid-template-columns:1fr;gap:30px;min-height:0}.systemHeroGlass{max-width:720px}.systemHeroCopy h1{font-size:clamp(46px,8vw,70px)}}
@media(max-width:650px){.systemHero{padding:24px 0 34px}.systemHeroShell{padding:26px 22px;border-radius:28px}.systemHeroGlass{padding:20px;border-radius:25px}.systemGlassItems{grid-template-columns:1fr}.systemGlassItem,.infraSystemHero .systemGlassItem:nth-child(5),.securitySystemHero .systemGlassItem:nth-child(3),.workplaceSystemHero .systemGlassItem:nth-child(3){grid-column:auto}.systemHeroLinkRow{align-items:flex-start;flex-direction:column}.systemHeroCopy .lead{font-size:16px}}
/* =========================================================
V174 — Apple Zero-Touch: clean SU-IT glass flow
Bestellung → Einsatzbereit
========================================================= */
body.appleBusinessPage .abZeroTouch{
position:relative !important;
overflow:hidden !important;
color:#173b55 !important;
background:
radial-gradient(circle at 14% 22%,rgba(134,223,255,.18),transparent 28%),
radial-gradient(circle at 86% 72%,rgba(112,139,255,.10),transparent 30%),
linear-gradient(180deg,#ffffff 0%,#f8fcff 52%,#f1faff 100%) !important;
}
body.appleBusinessPage .abZeroTouch::before,
body.appleBusinessPage .abZeroTouch::after{
content:"";
position:absolute;
pointer-events:none;
border-radius:50%;
filter:blur(32px);
opacity:.55;
}
body.appleBusinessPage .abZeroTouch::before{
width:360px;
height:360px;
left:-130px;
top:40px;
background:radial-gradient(circle,rgba(103,207,242,.18),transparent 70%);
}
body.appleBusinessPage .abZeroTouch::after{
width:420px;
height:420px;
right:-150px;
bottom:-100px;
background:radial-gradient(circle,rgba(118,108,255,.10),transparent 70%);
}
body.appleBusinessPage .abZeroTouch .shell{
position:relative;
z-index:1;
}
body.appleBusinessPage .abZeroTouch .abEyebrow{
color:#34a9d8 !important;
}
body.appleBusinessPage .abZeroHead>p{
color:#668497 !important;
}
body.appleBusinessPage .abZeroHead h2 .grad-zero-a,
body.appleBusinessPage .abZeroHead h2 .grad-zero-b,
body.appleBusinessPage .abZeroHead h2 .grad-zero-c{
background:linear-gradient(90deg,#173f61 0%,#38a9db 52%,#55d2ce 100%) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
text-shadow:none !important;
}
/* Main process glass panel */
body.appleBusinessPage .abTimeline{
position:relative !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:7px !important;
margin-top:42px !important;
padding:20px 22px !important;
border-radius:30px !important;
background:
linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,252,255,.78)) !important;
border:1px solid rgba(126,190,220,.22) !important;
box-shadow:
0 22px 54px rgba(52,116,148,.09),
inset 0 1px 0 rgba(255,255,255,.98) !important;
backdrop-filter:blur(22px) saturate(125%) !important;
-webkit-backdrop-filter:blur(22px) saturate(125%) !important;
overflow-x:auto !important;
overflow-y:hidden !important;
isolation:isolate !important;
}
/* Quiet structural line behind the steps */
body.appleBusinessPage .abTimeline::before{
content:"" !important;
position:absolute !important;
left:34px !important;
right:34px !important;
top:50% !important;
height:1px !important;
transform:translateY(-50%) !important;
border-radius:999px !important;
background:linear-gradient(
90deg,
rgba(91,190,225,.10),
rgba(91,190,225,.26) 35%,
rgba(117,108,255,.20) 70%,
rgba(73,204,194,.10)
) !important;
opacity:1 !important;
z-index:0 !important;
}
/* Remove the moving/golden light sweep completely */
body.appleBusinessPage .abTimeline::after{
content:none !important;
display:none !important;
animation:none !important;
}
/* All process chips share one visual language */
body.appleBusinessPage .abTimeline span{
position:relative !important;
z-index:2 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-height:40px !important;
padding:9px 13px !important;
white-space:nowrap !important;
border-radius:13px !important;
color:#274f69 !important;
font-size:12px !important;
font-weight:800 !important;
letter-spacing:0 !important;
text-shadow:none !important;
background:
linear-gradient(180deg,rgba(255,255,255,.90),rgba(239,248,253,.78)) !important;
border:1px solid rgba(116,185,218,.22) !important;
box-shadow:
0 8px 18px rgba(55,119,149,.07),
inset 0 1px 0 rgba(255,255,255,.95) !important;
backdrop-filter:blur(14px) !important;
-webkit-backdrop-filter:blur(14px) !important;
}
/* Subtle SU-IT tints — no orange/gold */
body.appleBusinessPage .abTimeline span:nth-of-type(1){
background:linear-gradient(180deg,rgba(244,252,255,.96),rgba(222,246,255,.82)) !important;
}
body.appleBusinessPage .abTimeline span:nth-of-type(2){
background:linear-gradient(180deg,rgba(248,252,255,.96),rgba(226,241,255,.84)) !important;
}
body.appleBusinessPage .abTimeline span:nth-of-type(3){
background:linear-gradient(180deg,rgba(250,249,255,.96),rgba(236,231,255,.84)) !important;
}
body.appleBusinessPage .abTimeline span:nth-of-type(4),
body.appleBusinessPage .abTimeline span:nth-of-type(6){
background:linear-gradient(180deg,rgba(245,255,254,.96),rgba(222,248,245,.84)) !important;
}
body.appleBusinessPage .abTimeline span:nth-of-type(5){
background:linear-gradient(180deg,rgba(247,251,255,.96),rgba(222,237,255,.84)) !important;
}
body.appleBusinessPage .abTimeline span:nth-of-type(7){
background:linear-gradient(180deg,rgba(246,255,252,.96),rgba(220,247,238,.84)) !important;
}
body.appleBusinessPage .abTimeline span:nth-of-type(8){
background:linear-gradient(180deg,rgba(249,252,255,.96),rgba(231,239,255,.84)) !important;
}
/* Active final state: clear, premium, not glowing */
body.appleBusinessPage .abTimeline span.active{
color:#173f5c !important;
background:
linear-gradient(135deg,rgba(214,246,255,.98),rgba(228,238,255,.96) 55%,rgba(224,252,247,.96)) !important;
border:1px solid rgba(92,177,218,.36) !important;
box-shadow:
0 10px 22px rgba(65,132,165,.10),
inset 0 1px 0 rgba(255,255,255,.98) !important;
}
/* Arrows become small structural separators */
body.appleBusinessPage .abTimeline b{
position:relative !important;
z-index:2 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:20px !important;
height:20px !important;
flex:0 0 20px !important;
border-radius:50% !important;
color:#79a9bf !important;
font-size:11px !important;
font-weight:800 !important;
background:rgba(255,255,255,.72) !important;
border:1px solid rgba(112,182,214,.16) !important;
box-shadow:none !important;
}
/* Responsive: keep one clean horizontal flow with scroll */
@media(max-width:1100px){
body.appleBusinessPage .abTimeline{
justify-content:flex-start !important;
padding:17px 18px !important;
}
}
/* =========================================================
V176 — Unified premium glass style for Erstgespräch CTAs
========================================================= */
body a.glass[href*="erstgespraech"],
body a.firstTalk[href*="erstgespraech"],
body a.miniGlass[href*="erstgespraech"],
body .ctaBand a[href*="erstgespraech"],
body .heroActions a[href*="erstgespraech"]{
position:relative!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-height:46px!important;
padding:0 20px!important;
border-radius:16px!important;
overflow:hidden!important;
isolation:isolate!important;
font-family:var(--suit-body-font,Manrope,Inter,system-ui,sans-serif)!important;
font-size:14px!important;
font-weight:800!important;
line-height:1!important;
letter-spacing:-.01em!important;
text-decoration:none!important;
color:#fff!important;
-webkit-text-fill-color:#fff!important;
background:
linear-gradient(135deg,rgba(51,190,224,.94) 0%,rgba(70,168,236,.94) 52%,rgba(102,119,247,.92) 100%)!important;
border:1px solid rgba(255,255,255,.78)!important;
box-shadow:
0 12px 28px rgba(61,151,211,.22),
0 3px 10px rgba(69,116,214,.09),
inset 0 1px 0 rgba(255,255,255,.62),
inset 0 -1px 0 rgba(38,110,178,.14)!important;
backdrop-filter:blur(18px) saturate(145%)!important;
-webkit-backdrop-filter:blur(18px) saturate(145%)!important;
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,filter .2s ease!important;
}
/* Soft glass highlight, not a gold glow. */
body a.glass[href*="erstgespraech"]::before,
body a.firstTalk[href*="erstgespraech"]::before,
body a.miniGlass[href*="erstgespraech"]::before,
body .ctaBand a[href*="erstgespraech"]::before,
body .heroActions a[href*="erstgespraech"]::before{
content:""!important;
display:block!important;
position:absolute!important;
z-index:-1!important;
left:9%!important;
right:9%!important;
top:2px!important;
height:44%!important;
border-radius:999px!important;
background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0))!important;
pointer-events:none!important;
}
body a.glass[href*="erstgespraech"]::after,
body a.firstTalk[href*="erstgespraech"]::after,
body a.miniGlass[href*="erstgespraech"]::after,
body .ctaBand a[href*="erstgespraech"]::after,
body .heroActions a[href*="erstgespraech"]::after{
content:none!important;
display:none!important;
}
body a.glass[href*="erstgespraech"]:hover,
body a.firstTalk[href*="erstgespraech"]:hover,
body a.miniGlass[href*="erstgespraech"]:hover,
body .ctaBand a[href*="erstgespraech"]:hover,
body .heroActions a[href*="erstgespraech"]:hover{
transform:translateY(-2px)!important;
color:#fff!important;
-webkit-text-fill-color:#fff!important;
border-color:rgba(255,255,255,.92)!important;
background:
linear-gradient(135deg,rgba(43,184,222,.98) 0%,rgba(61,157,232,.98) 50%,rgba(92,108,241,.97) 100%)!important;
box-shadow:
0 17px 34px rgba(61,151,211,.28),
0 5px 14px rgba(74,106,211,.13),
inset 0 1px 0 rgba(255,255,255,.70)!important;
filter:saturate(1.04)!important;
}
body a.glass[href*="erstgespraech"]:focus-visible,
body a.firstTalk[href*="erstgespraech"]:focus-visible,
body a.miniGlass[href*="erstgespraech"]:focus-visible,
body .ctaBand a[href*="erstgespraech"]:focus-visible,
body .heroActions a[href*="erstgespraech"]:focus-visible{
outline:3px solid rgba(92,190,236,.24)!important;
outline-offset:3px!important;
}
@media(max-width:600px){
body a.glass[href*="erstgespraech"],
body a.firstTalk[href*="erstgespraech"],
body a.miniGlass[href*="erstgespraech"],
body .ctaBand a[href*="erstgespraech"],
body .heroActions a[href*="erstgespraech"]{
min-height:44px!important;
padding:0 17px!important;
border-radius:15px!important;
font-size:13px!important;
}
}
/* =========================================================
V177 — Unified light inquiry/contact CTA system
--------------------------------------------------------- */
/* Shared light glass CTA style for inquiry/contact actions */
a[href*="erstgespraech"],
a[href*="kontakt"],
button[type="submit"],
input[type="submit"],
.firstTalk,
.formActions .glass,
.contactAside .miniGlass {
font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}
/* Only style actual CTA-looking controls, not plain footer/navigation text links */
.heroActions a[href*="erstgespraech"],
.ctaBand a[href*="erstgespraech"],
.contactAside a[href*="erstgespraech"],
a.firstTalk,
a.glass[href*="erstgespraech"],
a.miniGlass[href*="erstgespraech"],
.formActions button[type="submit"],
.formActions .glass,
button[type="submit"].glass,
button[type="submit"].shopPrimary {
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-height:44px !important;
padding:0 18px !important;
border-radius:14px !important;
color:#17415c !important;
font-size:14px !important;
font-weight:750 !important;
letter-spacing:-.01em !important;
text-shadow:none !important;
background:
linear-gradient(135deg,rgba(215,246,255,.96),rgba(190,232,252,.94) 52%,rgba(210,226,255,.92)) !important;
border:1px solid rgba(105,184,222,.28) !important;
box-shadow:
0 10px 24px rgba(52,132,170,.10),
inset 0 1px 0 rgba(255,255,255,.96) !important;
backdrop-filter:blur(14px) saturate(120%) !important;
-webkit-backdrop-filter:blur(14px) saturate(120%) !important;
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease,
background .18s ease !important;
}
.heroActions a[href*="erstgespraech"]:hover,
.ctaBand a[href*="erstgespraech"]:hover,
.contactAside a[href*="erstgespraech"]:hover,
a.firstTalk:hover,
a.glass[href*="erstgespraech"]:hover,
a.miniGlass[href*="erstgespraech"]:hover,
.formActions button[type="submit"]:hover,
.formActions .glass:hover,
button[type="submit"].glass:hover,
button[type="submit"].shopPrimary:hover {
transform:translateY(-1px) !important;
color:#123a54 !important;
border-color:rgba(83,170,213,.40) !important;
background:
linear-gradient(135deg,rgba(225,250,255,.99),rgba(201,239,255,.98) 52%,rgba(221,234,255,.96)) !important;
box-shadow:
0 14px 30px rgba(50,129,169,.13),
inset 0 1px 0 rgba(255,255,255,1) !important;
}
/* Request/contact form submit buttons should match the same visual language */
.formActions button[type="submit"],
.contactHome button[type="submit"],
.contactPage button[type="submit"] {
min-width:134px !important;
}
/* Keep form request CTAs clear and compact */
.formActions{
align-items:center !important;
gap:14px !important;
}
.formActions span{
color:#7793a5 !important;
font-size:13px !important;
}
/* Small inquiry chips/buttons elsewhere */
a[href*="erstgespraech"].miniGlass,
a[href*="kontakt"].miniGlass{
padding:0 15px !important;
min-height:40px !important;
border-radius:13px !important;
}
/* =========================================================
V178 — Final light glass override for inquiry CTAs
Fixes older V176 specificity on direct-contact buttons.
========================================================= */
body a.glass[href*="erstgespraech"],
body a.firstTalk[href*="erstgespraech"],
body a.miniGlass[href*="erstgespraech"],
body .ctaBand a[href*="erstgespraech"],
body .heroActions a[href*="erstgespraech"],
body .contactAside a[href*="erstgespraech"],
body .formActions button[type="submit"],
body .formActions .glass,
body button[type="submit"].glass,
body button[type="submit"].shopPrimary {
min-height:44px !important;
padding:0 18px !important;
border-radius:14px !important;
font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
font-size:14px !important;
font-weight:750 !important;
line-height:1 !important;
letter-spacing:-.01em !important;
color:#17415c !important;
-webkit-text-fill-color:#17415c !important;
text-shadow:none !important;
background:
linear-gradient(135deg,
rgba(232,250,255,.98) 0%,
rgba(209,241,253,.97) 52%,
rgba(220,235,255,.96) 100%) !important;
border:1px solid rgba(108,184,219,.28) !important;
box-shadow:
0 9px 22px rgba(47,125,165,.09),
inset 0 1px 0 rgba(255,255,255,.98) !important;
backdrop-filter:blur(16px) saturate(116%) !important;
-webkit-backdrop-filter:blur(16px) saturate(116%) !important;
filter:none !important;
}
/* Remove the stronger V176 top highlight so these buttons stay clean */
body a.glass[href*="erstgespraech"]::before,
body a.firstTalk[href*="erstgespraech"]::before,
body a.miniGlass[href*="erstgespraech"]::before,
body .ctaBand a[href*="erstgespraech"]::before,
body .heroActions a[href*="erstgespraech"]::before,
body .contactAside a[href*="erstgespraech"]::before {
content:"" !important;
position:absolute !important;
left:12% !important;
right:12% !important;
top:2px !important;
height:34% !important;
border-radius:999px !important;
background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0)) !important;
opacity:.70 !important;
}
body a.glass[href*="erstgespraech"]:hover,
body a.firstTalk[href*="erstgespraech"]:hover,
body a.miniGlass[href*="erstgespraech"]:hover,
body .ctaBand a[href*="erstgespraech"]:hover,
body .heroActions a[href*="erstgespraech"]:hover,
body .contactAside a[href*="erstgespraech"]:hover,
body .formActions button[type="submit"]:hover,
body .formActions .glass:hover,
body button[type="submit"].glass:hover,
body button[type="submit"].shopPrimary:hover {
transform:translateY(-1px) !important;
color:#123a54 !important;
-webkit-text-fill-color:#123a54 !important;
background:
linear-gradient(135deg,
rgba(240,253,255,1) 0%,
rgba(219,247,255,.99) 52%,
rgba(229,241,255,.99) 100%) !important;
border-color:rgba(82,169,211,.38) !important;
box-shadow:
0 13px 28px rgba(47,125,165,.12),
inset 0 1px 0 rgba(255,255,255,1) !important;
filter:none !important;
}
/* =========================================================
V179 — Unified premium glass CTAs + shop buttons
No image changes. Website-only visual refinement.
========================================================= */
:root{
--cta-ice-a:rgba(235,251,255,.98);
--cta-ice-b:rgba(213,242,253,.96);
--cta-ice-c:rgba(224,237,255,.95);
--cta-warm:rgba(255,244,211,.34);
--cta-border:rgba(103,180,216,.28);
--cta-text:#17415c;
}
/* Shared geometry / typography for main CTA-like buttons */
.heroActions .glass,
.heroActions .ghost,
.ctaBand .glass,
.ctaBand .ghost,
.shopPrimary,
.tariffAdd,
button.tariffAdd,
a.tariffAdd,
.formActions button,
.formActions .glass,
.contactAside .miniGlass,
a.firstTalk,
button[type="submit"].glass,
button[type="submit"].shopPrimary {
position:relative !important;
overflow:hidden !important;
min-height:44px !important;
border-radius:14px !important;
font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
font-size:14px !important;
font-weight:750 !important;
letter-spacing:-.01em !important;
text-shadow:none !important;
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease,
background .18s ease !important;
}
/* Primary glass CTA — cool, clean, slightly reflective */
.heroActions .glass,
.ctaBand .glass,
.shopPrimary,
.tariffAdd,
button.tariffAdd,
a.tariffAdd,
.formActions button,
.formActions .glass,
.contactAside .miniGlass,
a.firstTalk,
button[type="submit"].glass,
button[type="submit"].shopPrimary {
color:var(--cta-text) !important;
-webkit-text-fill-color:var(--cta-text) !important;
background:
radial-gradient(circle at 78% 18%, var(--cta-warm), transparent 28%),
linear-gradient(135deg,var(--cta-ice-a) 0%,var(--cta-ice-b) 54%,var(--cta-ice-c) 100%) !important;
border:1px solid var(--cta-border) !important;
box-shadow:
0 10px 24px rgba(51,127,164,.09),
inset 0 1px 0 rgba(255,255,255,.98) !important;
backdrop-filter:blur(16px) saturate(118%) !important;
-webkit-backdrop-filter:blur(16px) saturate(118%) !important;
}
/* Secondary / "Lösungen ansehen" — harmonized, softer */
.heroActions .ghost,
.ctaBand .ghost {
color:#2a6586 !important;
-webkit-text-fill-color:#2a6586 !important;
background:
radial-gradient(circle at 82% 18%,rgba(255,244,214,.24),transparent 30%),
linear-gradient(135deg,rgba(252,254,255,.96),rgba(239,248,253,.95) 58%,rgba(245,248,255,.96)) !important;
border:1px solid rgba(115,176,207,.22) !important;
box-shadow:
0 8px 20px rgba(62,122,151,.06),
inset 0 1px 0 rgba(255,255,255,.98) !important;
}
/* Reflective glass highlight, no strong gold */
.heroActions .glass::after,
.heroActions .ghost::after,
.ctaBand .glass::after,
.ctaBand .ghost::after,
.shopPrimary::after,
.tariffAdd::after,
.formActions button::after,
.contactAside .miniGlass::after,
a.firstTalk::after {
content:"" !important;
position:absolute !important;
left:8% !important;
right:8% !important;
top:2px !important;
height:36% !important;
pointer-events:none !important;
border-radius:999px !important;
background:linear-gradient(
90deg,
rgba(255,255,255,.10),
rgba(255,255,255,.62) 42%,
rgba(255,249,225,.30) 70%,
rgba(255,255,255,.08)
) !important;
opacity:.78 !important;
filter:blur(.2px) !important;
}
/* Hover: pleasant light lift */
.heroActions .glass:hover,
.heroActions .ghost:hover,
.ctaBand .glass:hover,
.ctaBand .ghost:hover,
.shopPrimary:hover,
.tariffAdd:hover,
.formActions button:hover,
.formActions .glass:hover,
.contactAside .miniGlass:hover,
a.firstTalk:hover {
transform:translateY(-1px) !important;
border-color:rgba(79,164,206,.36) !important;
box-shadow:
0 14px 30px rgba(49,125,164,.12),
inset 0 1px 0 rgba(255,255,255,1) !important;
}
/* Shopping/product cards: same language for cart/request actions */
.tariffCard .tariffAdd,
.comboCard .tariffAdd,
.domainCard .shopPrimary,
.productCard .shopPrimary,
.cartDrawer .shopPrimary,
.checkoutPage .shopPrimary,
.paymentPage .shopPrimary {
width:100% !important;
justify-content:center !important;
color:#17415c !important;
-webkit-text-fill-color:#17415c !important;
background:
radial-gradient(circle at 82% 18%,rgba(255,244,212,.30),transparent 26%),
linear-gradient(135deg,rgba(232,250,255,.98),rgba(207,240,253,.97) 55%,rgba(222,236,255,.96)) !important;
border:1px solid rgba(101,180,216,.28) !important;
}
/* Small request buttons stay compact */
.miniGlass,
.firstTalk {
padding-inline:16px !important;
}
/* Keep footer/plain text links untouched */
.footer a,
.megaOverview,
.megaLinks a,
.nav a {
text-shadow:none;
}
/* =========================================================
V180 — Page-specific system hero title gradients
Infrastructure / Security / Workplace
========================================================= */
/* Shared premium gradient-title behavior */
.infraSystemHero .systemHeroCopy h1,
.securitySystemHero .systemHeroCopy h1,
.workplaceSystemHero .systemHeroCopy h1{
display:inline-block !important;
width:auto !important;
max-width:100% !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
-webkit-background-clip:text !important;
background-clip:text !important;
text-shadow:none !important;
filter:none !important;
}
/* Infrastructure — technical navy / cyan / blue */
.infraSystemHero .systemHeroCopy h1{
background-image:
linear-gradient(
100deg,
#173b55 0%,
#1f5879 26%,
#2f93c5 54%,
#55cbe8 76%,
#4b7ee8 100%
) !important;
}
/* Security — calm navy / blue-violet / protected green */
.securitySystemHero .systemHeroCopy h1{
background-image:
linear-gradient(
100deg,
#173b55 0%,
#285b86 28%,
#6572d9 55%,
#7568d8 69%,
#53bfa6 100%
) !important;
}
/* Workplace — sky / Microsoft violet / Apple-like mint */
.workplaceSystemHero .systemHeroCopy h1{
background-image:
linear-gradient(
100deg,
#173b55 0%,
#2e76a5 28%,
#54b7e7 50%,
#7672df 72%,
#64cbb1 100%
) !important;
}
/* Small matching ambient highlight behind the title area */
.infraSystemHero .systemHeroCopy::after,
.securitySystemHero .systemHeroCopy::after,
.workplaceSystemHero .systemHeroCopy::after{
content:"" !important;
position:absolute !important;
left:-30px !important;
top:64px !important;
width:390px !important;
height:190px !important;
pointer-events:none !important;
border-radius:50% !important;
filter:blur(42px) !important;
opacity:.20 !important;
z-index:-1 !important;
}
.infraSystemHero .systemHeroCopy::after{
background:radial-gradient(circle,rgba(75,190,230,.42),transparent 68%) !important;
}
.securitySystemHero .systemHeroCopy::after{
background:radial-gradient(circle,rgba(103,102,220,.34),rgba(82,190,161,.10) 48%,transparent 70%) !important;
}
.workplaceSystemHero .systemHeroCopy::after{
background:radial-gradient(circle,rgba(82,183,232,.32),rgba(116,106,222,.10) 52%,transparent 72%) !important;
}
/* Keep the copy above the soft title glow */
.infraSystemHero .systemHeroCopy,
.securitySystemHero .systemHeroCopy,
.workplaceSystemHero .systemHeroCopy{
isolation:isolate !important;
}
/* =========================================================
V181 — Cohesive page color systems for Infrastructure,
Security and Workplace (full-page tone alignment)
========================================================= */
/* ---------- Infrastructure ---------- */
body.infrastructurePage{
background:linear-gradient(180deg,#fbfeff 0%,#f5fbff 28%,#edf8fd 100%) !important;
}
body.infrastructurePage main{
background:
radial-gradient(circle at 10% 12%,rgba(96,207,245,.11),transparent 18%),
radial-gradient(circle at 88% 18%,rgba(74,131,244,.08),transparent 20%),
linear-gradient(180deg,#fbfeff 0%,#f5fbff 34%,#edf8fd 100%);
}
body.infrastructurePage .infraSystemHero{
background:
radial-gradient(circle at 18% 22%,rgba(68,191,232,.16),transparent 25%),
radial-gradient(circle at 86% 72%,rgba(63,124,245,.13),transparent 28%),
linear-gradient(180deg,#fbfeff,#eef9fd) !important;
}
body.infrastructurePage #infrastructure-solutions,
body.infrastructurePage #infrastructure-solutions.section.soft{
position:relative;
isolation:isolate;
overflow:hidden;
background:
radial-gradient(ellipse at 14% 24%,rgba(92,198,237,.14),transparent 28%),
radial-gradient(ellipse at 82% 76%,rgba(89,139,247,.10),transparent 32%),
linear-gradient(180deg,#eef9fe 0%,#fafdff 50%,#edf8fd 100%) !important;
}
body.infrastructurePage #infrastructure-solutions::before{
content:"";
position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(ellipse at 18% 18%,rgba(255,255,255,.88) 0 9%,transparent 30%),
radial-gradient(ellipse at 74% 36%,rgba(214,244,255,.42) 0 10%,transparent 34%);
filter:blur(24px);opacity:.85;
}
body.infrastructurePage #infrastructure-solutions .center h2{
background:linear-gradient(100deg,#173b55 0%,#256b8c 34%,#44a8d7 68%,#6e86f1 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.infrastructurePage .serviceCard{
background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(244,250,255,.84)) !important;
border:1px solid rgba(109,181,215,.20) !important;
box-shadow:0 20px 54px rgba(45,112,146,.10), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
body.infrastructurePage .serviceCard:hover{
box-shadow:0 30px 70px rgba(45,112,146,.15), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
body.infrastructurePage .serviceCard:nth-child(1) .overviewIcon{background:linear-gradient(135deg,#4db9ea,#5d8fff) !important;}
body.infrastructurePage .serviceCard:nth-child(2) .overviewIcon{background:linear-gradient(135deg,#57d0de,#509cf1) !important;}
body.infrastructurePage .serviceCard:nth-child(3) .overviewIcon{background:linear-gradient(135deg,#5e91f2,#7185eb) !important;}
body.infrastructurePage .serviceCard:nth-child(4) .overviewIcon{background:linear-gradient(135deg,#5dc9bf,#6d9fff) !important;}
body.infrastructurePage .ctaBand{
background:linear-gradient(135deg,rgba(222,246,255,.90),rgba(242,251,255,.95)) !important;
border-color:rgba(95,173,209,.22) !important;
box-shadow:0 18px 52px rgba(57,122,156,.08), inset 0 1px 0 rgba(255,255,255,.85);
}
/* ---------- Security ---------- */
body.securitySystemPage{
background:linear-gradient(180deg,#fbfdff 0%,#f5f9fe 32%,#eef7fd 100%) !important;
}
body.securitySystemPage main{
background:
radial-gradient(circle at 12% 10%,rgba(90,156,240,.10),transparent 18%),
radial-gradient(circle at 88% 20%,rgba(113,91,235,.08),transparent 20%),
radial-gradient(circle at 82% 82%,rgba(95,201,155,.07),transparent 22%),
linear-gradient(180deg,#fbfdff 0%,#f5f9fe 34%,#eef7fd 100%);
}
body.securitySystemPage .securitySystemHero{
background:
radial-gradient(circle at 14% 26%,rgba(74,154,230,.15),transparent 27%),
radial-gradient(circle at 88% 62%,rgba(113,91,235,.12),transparent 28%),
linear-gradient(180deg,#fbfdff,#eff7fc) !important;
}
body.securitySystemPage #security-solutions,
body.securitySystemPage #security-solutions.section.soft{
position:relative;
isolation:isolate;
overflow:hidden;
background:
radial-gradient(ellipse at 14% 22%,rgba(91,157,240,.13),transparent 28%),
radial-gradient(ellipse at 84% 74%,rgba(107,95,231,.10),transparent 30%),
radial-gradient(ellipse at 72% 16%,rgba(96,203,162,.08),transparent 22%),
linear-gradient(180deg,#f0f8ff 0%,#fafcff 50%,#eef7fd 100%) !important;
}
body.securitySystemPage #security-solutions::before{
content:"";
position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(ellipse at 22% 16%,rgba(255,255,255,.90) 0 8%,transparent 30%),
radial-gradient(ellipse at 76% 40%,rgba(226,236,255,.48) 0 11%,transparent 36%);
filter:blur(24px);opacity:.9;
}
body.securitySystemPage #security-solutions .center h2{
background:linear-gradient(100deg,#173b55 0%,#305f8d 30%,#6572d9 66%,#57bea8 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.securitySystemPage .overviewCard,
body.securitySystemPage .serviceCard{
background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(246,250,255,.84)) !important;
border:1px solid rgba(113,170,214,.18) !important;
box-shadow:0 20px 54px rgba(52,99,148,.10), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
body.securitySystemPage .overviewCard:hover,
body.securitySystemPage .serviceCard:hover{
box-shadow:0 30px 70px rgba(52,99,148,.15), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
body.securitySystemPage .overviewGrid .overviewCard:nth-child(1) .overviewIcon{background:linear-gradient(135deg,#55a4f1,#6b7be6) !important;}
body.securitySystemPage .overviewGrid .overviewCard:nth-child(2) .overviewIcon{background:linear-gradient(135deg,#6d7ff0,#7e6ae5) !important;}
body.securitySystemPage .overviewGrid .overviewCard:nth-child(3) .overviewIcon{background:linear-gradient(135deg,#56c3bf,#69b5a1) !important;}
body.securitySystemPage .ctaBand{
background:linear-gradient(135deg,rgba(232,244,255,.90),rgba(245,251,255,.95)) !important;
border-color:rgba(109,163,212,.22) !important;
box-shadow:0 18px 52px rgba(63,110,152,.08), inset 0 1px 0 rgba(255,255,255,.85);
}
/* ---------- Workplace ---------- */
body.workplacePage{
background:linear-gradient(180deg,#fbfeff 0%,#f6fbff 28%,#eef9fd 100%) !important;
}
body.workplacePage main{
background:
radial-gradient(circle at 12% 12%,rgba(107,214,243,.11),transparent 18%),
radial-gradient(circle at 88% 16%,rgba(122,111,244,.09),transparent 20%),
radial-gradient(circle at 84% 82%,rgba(98,207,180,.07),transparent 20%),
linear-gradient(180deg,#fbfeff 0%,#f6fbff 34%,#eef9fd 100%);
}
body.workplacePage .workplaceSystemHero{
background:
radial-gradient(circle at 12% 18%,rgba(104,213,244,.16),transparent 27%),
radial-gradient(circle at 86% 26%,rgba(126,114,245,.13),transparent 28%),
radial-gradient(circle at 76% 82%,rgba(101,212,178,.11),transparent 26%),
linear-gradient(180deg,#fbfeff,#eef9fd) !important;
}
body.workplacePage #workplace-solutions,
body.workplacePage #workplace-solutions.section.soft,
body.workplacePage .connectGlowSection{
position:relative;
isolation:isolate;
overflow:hidden;
background:
radial-gradient(ellipse at 12% 25%,rgba(115,211,247,.16),transparent 28%),
radial-gradient(ellipse at 86% 70%,rgba(125,113,255,.12),transparent 30%),
radial-gradient(ellipse at 74% 16%,rgba(108,218,185,.08),transparent 22%),
linear-gradient(180deg,#effaff 0%,#f9fdff 50%,#edf8ff 100%) !important;
}
body.workplacePage #workplace-solutions::before,
body.workplacePage .connectGlowSection::before{
content:"";
position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(ellipse at 24% 18%,rgba(255,255,255,.92) 0 8%,transparent 28%),
radial-gradient(ellipse at 68% 42%,rgba(255,255,255,.85) 0 9%,transparent 30%),
radial-gradient(ellipse at 44% 82%,rgba(207,241,255,.38) 0 12%,transparent 34%);
filter:blur(22px);
opacity:.85;
}
body.workplacePage #workplace-solutions .center h2,
body.workplacePage .connectGlowSection .center h2{
background:linear-gradient(100deg,#173b55 0%,#2f7cac 34%,#58b7e8 62%,#7178e7 82%,#67c9b6 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.workplacePage .serviceCard{
min-height:270px;
padding:30px !important;
background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(246,251,255,.82)) !important;
border:1px solid rgba(114,184,216,.20) !important;
box-shadow:0 20px 50px rgba(42,105,137,.10),inset 0 1px 0 rgba(255,255,255,.95) !important;
}
body.workplacePage .serviceCard:hover{
box-shadow:0 30px 70px rgba(42,105,137,.16),inset 0 1px 0 rgba(255,255,255,.95) !important;
}
body.workplacePage .serviceCard:nth-child(1) .overviewIcon{background:linear-gradient(135deg,#56c0ea,#7b79ea) !important;}
body.workplacePage .serviceCard:nth-child(2) .overviewIcon{background:linear-gradient(135deg,#57b7f0,#6e7df0) !important;}
body.workplacePage .serviceCard:nth-child(3) .overviewIcon{background:linear-gradient(135deg,#48c5d8,#6f8eff) !important;}
body.workplacePage .ctaBand{
background:linear-gradient(135deg,rgba(229,247,255,.90),rgba(243,251,255,.95)) !important;
border-color:rgba(105,181,215,.20) !important;
box-shadow:0 18px 52px rgba(61,118,154,.08), inset 0 1px 0 rgba(255,255,255,.86);
}
/* Slightly deeper page-colored kicker text inside themed sections */
body.infrastructurePage #infrastructure-solutions .k{color:#2f9fcc !important;}
body.securitySystemPage #security-solutions .k{color:#4d95d6 !important;}
body.workplacePage #workplace-solutions .k{color:#45a6d8 !important;}
/* =========================================================
V182 — Distinct page color identities
Infrastructure = warm orange
Security = green + red accents
Workplace = light sky / lavender / mint
========================================================= */
/* Infrastructure */
body.infrastructurePage{
background:linear-gradient(180deg,#fffdfb 0%,#fff9f2 38%,#fdf3e9 100%) !important;
}
body.infrastructurePage main{
background:
radial-gradient(circle at 12% 12%,rgba(255,177,96,.16),transparent 19%),
radial-gradient(circle at 88% 18%,rgba(255,126,83,.10),transparent 20%),
radial-gradient(circle at 76% 82%,rgba(255,211,130,.10),transparent 22%),
linear-gradient(180deg,#fffdfb 0%,#fff8f1 34%,#fdf2e8 100%) !important;
}
body.infrastructurePage .infraSystemHero{
background:
radial-gradient(circle at 16% 20%,rgba(255,174,91,.22),transparent 28%),
radial-gradient(circle at 86% 70%,rgba(244,109,76,.14),transparent 29%),
radial-gradient(circle at 74% 18%,rgba(255,214,139,.14),transparent 24%),
linear-gradient(180deg,#fffdfb 0%,#fff5e9 100%) !important;
}
body.infrastructurePage .systemHeroShell{
border-color:rgba(220,151,92,.20) !important;
background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(255,249,242,.84)) !important;
box-shadow:0 30px 80px rgba(163,95,47,.11) !important;
}
body.infrastructurePage .infraSystemHero .systemHeroCopy h1{
background-image:linear-gradient(100deg,#3d3832 0%,#9c5b32 28%,#e78b45 58%,#f36f5d 78%,#d4a34b 100%) !important;
}
body.infrastructurePage .systemHeroGlass{
border-color:rgba(235,178,117,.26) !important;
background:
linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,250,244,.44)),
radial-gradient(circle at 10% 8%,rgba(255,179,91,.24),transparent 34%),
radial-gradient(circle at 88% 88%,rgba(244,109,76,.13),transparent 40%) !important;
}
body.infrastructurePage #infrastructure-solutions,
body.infrastructurePage #infrastructure-solutions.section.soft{
background:
radial-gradient(ellipse at 14% 24%,rgba(255,178,92,.17),transparent 29%),
radial-gradient(ellipse at 84% 74%,rgba(244,109,76,.10),transparent 30%),
radial-gradient(ellipse at 72% 14%,rgba(255,221,151,.10),transparent 24%),
linear-gradient(180deg,#fff6eb 0%,#fffbf7 50%,#fdf1e6 100%) !important;
}
body.infrastructurePage #infrastructure-solutions .center h2{
background:linear-gradient(100deg,#3f3a34 0%,#a25f36 34%,#e78b45 68%,#f2715f 100%) !important;
-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;
}
body.infrastructurePage #infrastructure-solutions .k{color:#d47c3f !important}
body.infrastructurePage .serviceCard{
background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,248,241,.86)) !important;
border-color:rgba(224,162,107,.22) !important;
box-shadow:0 20px 54px rgba(158,96,51,.10), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
body.infrastructurePage .ctaBand{
background:radial-gradient(circle at 86% 10%,rgba(255,211,136,.16),transparent 26%),linear-gradient(135deg,rgba(255,239,219,.92),rgba(255,249,242,.96)) !important;
border-color:rgba(221,155,97,.24) !important;
}
/* Security */
body.securitySystemPage{
background:linear-gradient(180deg,#fbfefc 0%,#f2faf5 42%,#edf6f1 100%) !important;
}
body.securitySystemPage main{
background:
radial-gradient(circle at 12% 12%,rgba(78,184,132,.14),transparent 19%),
radial-gradient(circle at 88% 18%,rgba(226,90,88,.09),transparent 20%),
radial-gradient(circle at 78% 84%,rgba(97,201,156,.10),transparent 22%),
linear-gradient(180deg,#fbfefc 0%,#f4fbf6 34%,#edf6f1 100%) !important;
}
body.securitySystemPage .securitySystemHero{
background:
radial-gradient(circle at 14% 24%,rgba(72,183,128,.19),transparent 27%),
radial-gradient(circle at 88% 62%,rgba(222,83,83,.11),transparent 28%),
radial-gradient(circle at 78% 14%,rgba(122,210,167,.11),transparent 24%),
linear-gradient(180deg,#fbfefc 0%,#eff8f3 100%) !important;
}
body.securitySystemPage .systemHeroShell{
border-color:rgba(104,176,139,.20) !important;
background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(247,252,249,.84)) !important;
box-shadow:0 30px 80px rgba(55,115,83,.10) !important;
}
body.securitySystemPage .securitySystemHero .systemHeroCopy h1{
background-image:linear-gradient(100deg,#1f4134 0%,#2f7a58 30%,#55ad7b 55%,#d76662 80%,#a84444 100%) !important;
}
body.securitySystemPage .systemHeroGlass{
border-color:rgba(111,181,145,.24) !important;
background:
linear-gradient(145deg,rgba(255,255,255,.72),rgba(247,252,249,.45)),
radial-gradient(circle at 12% 10%,rgba(73,184,130,.20),transparent 35%),
radial-gradient(circle at 88% 88%,rgba(218,82,80,.12),transparent 42%) !important;
}
body.securitySystemPage .systemLiveDot{
background:#d8645f !important;
box-shadow:0 0 0 7px rgba(216,100,95,.11),0 0 22px rgba(216,100,95,.28) !important;
}
body.securitySystemPage #security-solutions,
body.securitySystemPage #security-solutions.section.soft{
background:
radial-gradient(ellipse at 14% 22%,rgba(82,183,132,.16),transparent 28%),
radial-gradient(ellipse at 84% 76%,rgba(218,84,81,.08),transparent 30%),
radial-gradient(ellipse at 72% 14%,rgba(124,211,168,.10),transparent 24%),
linear-gradient(180deg,#eff8f3 0%,#fbfdfc 50%,#edf6f1 100%) !important;
}
body.securitySystemPage #security-solutions .center h2{
background:linear-gradient(100deg,#1f4134 0%,#2f7a58 34%,#57ad7c 64%,#c75c58 100%) !important;
-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;
}
body.securitySystemPage #security-solutions .k{color:#4b9b70 !important}
body.securitySystemPage .overviewCard,
body.securitySystemPage .serviceCard{
background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(247,252,249,.86)) !important;
border-color:rgba(110,180,143,.20) !important;
box-shadow:0 20px 54px rgba(55,115,83,.09), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
body.securitySystemPage .ctaBand{
background:radial-gradient(circle at 86% 10%,rgba(218,84,81,.08),transparent 25%),linear-gradient(135deg,rgba(228,246,236,.92),rgba(248,252,249,.96)) !important;
border-color:rgba(106,175,140,.22) !important;
}
/* Workplace */
body.workplacePage{
background:linear-gradient(180deg,#fcfeff 0%,#f7fbff 40%,#f1f8fc 100%) !important;
}
body.workplacePage main{
background:
radial-gradient(circle at 12% 10%,rgba(104,213,244,.13),transparent 19%),
radial-gradient(circle at 88% 16%,rgba(143,127,245,.10),transparent 20%),
radial-gradient(circle at 84% 82%,rgba(98,207,180,.09),transparent 22%),
linear-gradient(180deg,#fcfeff 0%,#f7fbff 34%,#f1f8fc 100%) !important;
}
body.workplacePage .workplaceSystemHero{
background:
radial-gradient(circle at 12% 18%,rgba(104,213,244,.17),transparent 27%),
radial-gradient(circle at 86% 26%,rgba(143,127,245,.13),transparent 28%),
radial-gradient(circle at 76% 82%,rgba(101,212,178,.11),transparent 26%),
linear-gradient(180deg,#fcfeff 0%,#f1f9fd 100%) !important;
}
body.workplacePage .systemHeroShell{
border-color:rgba(129,183,216,.20) !important;
background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(247,252,255,.84)) !important;
box-shadow:0 30px 80px rgba(67,110,145,.10) !important;
}
body.workplacePage .workplaceSystemHero .systemHeroCopy h1{
background-image:linear-gradient(100deg,#173b55 0%,#4b8fb5 30%,#69bee8 54%,#8a79e8 76%,#69c8b2 100%) !important;
}
body.workplacePage .systemHeroGlass{
border-color:rgba(129,184,216,.22) !important;
background:
linear-gradient(145deg,rgba(255,255,255,.74),rgba(247,252,255,.46)),
radial-gradient(circle at 12% 10%,rgba(102,208,240,.20),transparent 35%),
radial-gradient(circle at 88% 88%,rgba(142,124,242,.13),transparent 42%),
radial-gradient(circle at 76% 20%,rgba(102,210,178,.10),transparent 28%) !important;
}
body.workplacePage #workplace-solutions,
body.workplacePage #workplace-solutions.section.soft,
body.workplacePage .connectGlowSection{
background:
radial-gradient(ellipse at 12% 25%,rgba(115,211,247,.17),transparent 28%),
radial-gradient(ellipse at 86% 70%,rgba(145,128,246,.12),transparent 30%),
radial-gradient(ellipse at 74% 16%,rgba(108,218,185,.10),transparent 22%),
linear-gradient(180deg,#f1faff 0%,#fbfdff 50%,#eef8fc 100%) !important;
}
body.workplacePage #workplace-solutions .center h2,
body.workplacePage .connectGlowSection .center h2{
background:linear-gradient(100deg,#173b55 0%,#4d8fb5 32%,#68bde8 60%,#8b7be7 80%,#6ac8b2 100%) !important;
-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;
}
body.workplacePage #workplace-solutions .k{color:#4ba7d2 !important}
body.workplacePage .serviceCard{
background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(246,251,255,.84)) !important;
border-color:rgba(122,182,216,.20) !important;
box-shadow:0 20px 54px rgba(62,110,146,.09), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
body.workplacePage .ctaBand{
background:radial-gradient(circle at 84% 10%,rgba(144,126,244,.08),transparent 25%),linear-gradient(135deg,rgba(231,247,255,.92),rgba(248,251,255,.96)) !important;
border-color:rgba(118,179,215,.22) !important;
}
/* =========================================================
V183 — New cinematic homepage hero video
========================================================= */
body.homePage .hero.videoReady{
position:relative;
overflow:hidden;
padding:104px 0 116px !important;
background:linear-gradient(180deg,#edf8fd 0%,#e9f5fb 100%) !important;
}
body.homePage .hero.videoReady .heroMedia{
position:absolute;
inset:0;
overflow:hidden;
}
body.homePage .hero.videoReady .heroMedia video{
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
filter:saturate(.92) brightness(.84) contrast(1.02);
transform:scale(1.018);
}
body.homePage .hero.videoReady .heroWash{
background:
radial-gradient(circle at 18% 24%,rgba(255,255,255,.44),transparent 34%),
radial-gradient(circle at 82% 24%,rgba(111,209,245,.22),transparent 30%),
linear-gradient(90deg,
rgba(248,252,255,.94) 0%,
rgba(244,250,255,.86) 28%,
rgba(235,246,252,.56) 58%,
rgba(227,241,249,.28) 100%),
linear-gradient(180deg,
rgba(7,36,54,.06) 0%,
rgba(11,45,66,.14) 100%) !important;
}
body.homePage .hero.videoReady .heroCopy{
position:relative;
z-index:2;
max-width:700px;
padding:34px 34px 30px;
border-radius:34px;
background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(245,250,253,.44)) !important;
border:1px solid rgba(255,255,255,.62);
backdrop-filter:blur(10px) saturate(118%);
-webkit-backdrop-filter:blur(10px) saturate(118%);
box-shadow:0 26px 60px rgba(31,93,123,.10), inset 0 1px 0 rgba(255,255,255,.88);
}
body.homePage .hero.videoReady .heroGlassNote{
position:relative;
z-index:2;
align-self:center;
margin:34px 0 0 auto;
max-width:340px;
padding:24px 24px 22px;
background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(235,246,252,.58)) !important;
border:1px solid rgba(255,255,255,.74) !important;
backdrop-filter:blur(18px) saturate(124%) !important;
-webkit-backdrop-filter:blur(18px) saturate(124%) !important;
box-shadow:0 22px 54px rgba(28,93,126,.13), inset 0 1px 0 rgba(255,255,255,.94) !important;
}
body.homePage .hero.videoReady .lead{
max-width:610px;
color:#436579 !important;
text-shadow:none;
}
@media(max-width:760px){
body.homePage .hero.videoReady .heroMedia video{
object-position:58% center;
transform:scale(1.04);
}
body.homePage .hero.videoReady .heroWash{
background:
linear-gradient(90deg,rgba(248,253,255,.90),rgba(239,249,253,.62)),
linear-gradient(180deg,rgba(255,255,255,.20),rgba(25,64,84,.12)) !important;
}
}
/* =========================
V189 – Homepage hero polish
Stronger title gradient + stable right glass card
========================= */
body.homePage .hero.videoReady .heroMedia video{
filter:saturate(.94) brightness(.86) contrast(1.03) !important;
}
body.homePage .hero.videoReady .heroWash{
background:
radial-gradient(circle at 18% 24%,rgba(255,255,255,.52),transparent 34%),
radial-gradient(circle at 82% 24%,rgba(116,212,246,.26),transparent 32%),
linear-gradient(90deg,
rgba(248,252,255,.93) 0%,
rgba(242,249,253,.84) 28%,
rgba(231,244,250,.48) 58%,
rgba(224,240,248,.22) 100%),
linear-gradient(180deg,
rgba(255,255,255,.10) 0%,
rgba(225,242,249,.10) 58%,
rgba(12,46,67,.18) 100%) !important;
}
body.homePage .hero.videoReady .heroTitle{
margin:6px 0 18px !important;
filter:drop-shadow(0 12px 24px rgba(56,136,185,.11)) !important;
transform:translate3d(0,0,0);
transition:transform .52s cubic-bezier(.2,.78,.22,1), filter .52s ease;
will-change:transform;
}
body.homePage .hero.videoReady .heroTitle .heroLine,
body.homePage .hero.videoReady .heroTitle .tone1,
body.homePage .hero.videoReady .heroTitle .tone2,
body.homePage .hero.videoReady .heroTitle .tone3,
body.homePage .hero.videoReady .heroTitle .tone4{
background:linear-gradient(92deg,
#244b67 0%,
#2e6a95 18%,
#318cc0 42%,
#4db5e8 68%,
#87dbff 100%) !important;
background-size:180% 100% !important;
background-position:0% 50% !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
transition:background-position .72s cubic-bezier(.18,.78,.22,1), filter .36s ease;
}
body.homePage .hero.videoReady .heroTitle .heroWord{
display:inline-flex;
align-items:flex-end;
gap:0;
}
body.homePage .hero.videoReady .heroTitle .heroLetter{
display:inline-block;
transform:translate3d(0,0,0);
transition:transform .58s cubic-bezier(.18,.78,.22,1), filter .38s ease;
transition-delay:calc(var(--d,0) * 18ms);
will-change:transform;
backface-visibility:hidden;
}
body.homePage .hero.videoReady .heroTitle .tone2{background-position:10% 50% !important;}
body.homePage .hero.videoReady .heroTitle .tone3{background-position:20% 50% !important;}
body.homePage .hero.videoReady .heroTitle .tone4{background-position:34% 50% !important;}
body.homePage #produktwelt{
position:relative;
padding-top:104px !important;
background:
radial-gradient(circle at 50% 0%,rgba(162,216,241,.18),transparent 32%),
linear-gradient(180deg,#f8fcfe 0%,#eff8fc 100%) !important;
}
body.homePage #produktwelt .center{
max-width:900px;
margin-bottom:48px;
}
body.homePage #produktwelt .center .k{
color:#5f7f92 !important;
letter-spacing:.14em;
}
body.homePage #produktwelt .gradHeroSky{
background-image:linear-gradient(90deg,
#4e5ee8 0%,
#5f7af2 26%,
#4f9aee 60%,
#58b8ea 100%) !important;
}
body.homePage #produktwelt .center p:last-child{
max-width:720px;
margin-left:auto;
margin-right:auto;
color:#708b9b;
}
body.homePage #produktwelt .worldGrid{
gap:26px;
}
body.homePage #produktwelt .worldCard{
border:1px solid rgba(77,147,183,.14);
box-shadow:0 20px 56px rgba(42,95,121,.09);
}
body.homePage #produktwelt .worldCard:hover{
transform:translateY(-8px);
box-shadow:0 28px 70px rgba(37,89,114,.14);
}
body.homePage #produktwelt .shade{
background:linear-gradient(180deg,rgba(9,32,46,.04),rgba(10,39,57,.82));
}
@media (hover:hover) and (pointer:fine){
body.homePage .hero.videoReady .heroTitle:hover{
transform:translate3d(6px,-2px,0) scale(1.006);
filter:drop-shadow(0 16px 32px rgba(53,132,182,.17)) !important;
}
body.homePage .hero.videoReady .heroTitle:hover .heroLine,
body.homePage .hero.videoReady .heroTitle:hover .tone1,
body.homePage .hero.videoReady .heroTitle:hover .tone2,
body.homePage .hero.videoReady .heroTitle:hover .tone3,
body.homePage .hero.videoReady .heroTitle:hover .tone4{
background-position:100% 50% !important;
}
body.homePage .hero.videoReady .heroTitle:hover .heroLetter{
transform:translate3d(0,-3px,0);
}
body.homePage .hero.videoReady .heroTitle:hover .heroWord .heroLetter:nth-child(2n){
transform:translate3d(0,-5px,0) scale(1.022);
}
body.homePage .hero.videoReady .heroTitle:hover .heroWord .heroLetter:nth-child(3n){
transform:translate3d(0,-4px,0) scale(1.014);
}
}
@media (prefers-reduced-motion:reduce){
body.homePage .hero.videoReady .heroTitle,
body.homePage .hero.videoReady .heroTitle .heroLine,
body.homePage .hero.videoReady .heroTitle .tone1,
body.homePage .hero.videoReady .heroTitle .tone2,
body.homePage .hero.videoReady .heroTitle .tone3,
body.homePage .hero.videoReady .heroTitle .tone4,
body.homePage .hero.videoReady .heroTitle .heroLetter{
transition:none !important;
}
}
body.homePage .hero.videoReady .lead{
color:#48687c !important;
}
body.homePage .hero.videoReady:before,
body.homePage .hero.videoReady:after,
body.homePage .hero.videoReady .heroGlassNote{
animation:none !important;
}
body.homePage .hero.videoReady .heroGlassNote{
transform:none !important;
will-change:auto !important;
background:linear-gradient(145deg,rgba(255,255,255,.80),rgba(236,247,252,.64)) !important;
border:1px solid rgba(255,255,255,.82) !important;
box-shadow:0 18px 40px rgba(38,104,136,.09), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
body.homePage .hero.videoReady .heroGlassNote strong{
color:#153b54 !important;
line-height:1.22;
}
body.homePage .hero.videoReady .heroGlassNote p{
color:#648296 !important;
}
body.homePage .hero.videoReady .heroActions{
margin-top:30px;
}
body.homePage .hero.videoReady .glass{
background:linear-gradient(135deg,#1f7bb3,#58c4ea) !important;
border:1px solid rgba(255,255,255,.74) !important;
box-shadow:0 16px 34px rgba(36,121,174,.19), inset 0 1px 0 rgba(255,255,255,.30) !important;
}
body.homePage .hero.videoReady .glass:hover{
transform:translateY(-2px);
box-shadow:0 18px 40px rgba(36,121,174,.24), inset 0 1px 0 rgba(255,255,255,.30) !important;
}
body.homePage .hero.videoReady .ghost{
background:rgba(255,255,255,.82) !important;
color:#2f6d91 !important;
border:1px solid rgba(110,185,221,.20) !important;
box-shadow:0 10px 24px rgba(55,118,149,.07);
}
@media(max-width:760px){
body.homePage .hero.videoReady .heroWash{
background:
linear-gradient(90deg,rgba(246,252,255,.90),rgba(235,246,252,.54)),
linear-gradient(180deg,rgba(255,255,255,.10),rgba(22,60,82,.14)) !important;
}
}
@media(max-width:980px){
body.homePage .hero.videoReady{padding:84px 0 92px !important;}
body.homePage .hero.videoReady .heroCopy{padding:26px 24px 24px;max-width:none;}
body.homePage .hero.videoReady .heroGlassNote{margin:18px 0 0;max-width:420px;}
}
@media(max-width:760px){
body.homePage .hero.videoReady .heroCopy{border-radius:26px;padding:22px 18px 20px;}
body.homePage .hero.videoReady .heroTitle{margin:4px 0 14px !important;}
body.homePage #produktwelt{padding-top:78px !important;}
}
/* =========================================================
V202 — Homepage refinement
Restore open hero, V199 blue palette, Domains-style right glass
========================================================= */
body.homePage .hero.videoReady{
padding:92px 0 104px !important;
background:#eaf7fd !important;
}
body.homePage .hero.videoReady .heroMedia video{
filter:saturate(.96) brightness(1.01) contrast(.98) !important;
transform:scale(1.015) !important;
}
body.homePage .hero.videoReady .heroWash{
background:
linear-gradient(90deg,
rgba(240,249,253,.74) 0%,
rgba(236,247,252,.54) 34%,
rgba(229,244,250,.18) 62%,
rgba(228,244,251,.10) 100%),
linear-gradient(180deg,
rgba(255,255,255,.08) 0%,
rgba(229,244,250,.10) 58%,
rgba(18,56,78,.14) 100%) !important;
}
body.homePage .hero.videoReady .heroGrid{
grid-template-columns:1.06fr .64fr !important;
gap:56px !important;
align-items:center !important;
}
/* V201 left glass removed: copy returns to open editorial layout */
body.homePage .hero.videoReady .heroCopy{
max-width:none !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
box-shadow:none !important;
}
/* Hero title now starts with the CTA-button blue, productwelt keeps the V199 palette */
body.homePage .hero.videoReady .heroTitle .heroLine,
body.homePage .hero.videoReady .heroTitle .tone1,
body.homePage .hero.videoReady .heroTitle .tone2,
body.homePage .hero.videoReady .heroTitle .tone3,
body.homePage .hero.videoReady .heroTitle .tone4{
background-image:linear-gradient(90deg,
#6ccdf2 0%,
#57bde8 18%,
#3f9ed2 40%,
#2f78ad 68%,
#89defd 100%) !important;
}
body.homePage #produktwelt .gradHeroSky{
background-image:linear-gradient(90deg,
#24577f 0%,
#469fd3 34%,
#6dcdf8 66%,
#dff5ff 100%) !important;
}
body.homePage .hero.videoReady .heroTitle .heroLine,
body.homePage .hero.videoReady .heroTitle .tone1,
body.homePage .hero.videoReady .heroTitle .tone2,
body.homePage .hero.videoReady .heroTitle .tone3,
body.homePage .hero.videoReady .heroTitle .tone4{
background-size:175% 100% !important;
background-position:0% 50% !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
transition:background-position .75s cubic-bezier(.2,.75,.2,1),filter .38s ease !important;
}
body.homePage .hero.videoReady .heroTitle{
margin:12px 0 !important;
transform:none !important;
filter:drop-shadow(0 7px 16px rgba(51,123,166,.08)) !important;
transition:filter .38s ease !important;
}
body.homePage .hero.videoReady .heroTitle .heroLetter{
transform:none !important;
transition:filter .34s ease,opacity .34s ease !important;
transition-delay:calc(var(--d,0) * 10ms) !important;
}
/* New restrained effect: light sweep + sequential clarity, no jumping */
@media (hover:hover) and (pointer:fine){
body.homePage .hero.videoReady .heroTitle:hover{
transform:none !important;
filter:drop-shadow(0 10px 22px rgba(56,145,198,.14)) !important;
}
body.homePage .hero.videoReady .heroTitle:hover .heroLine,
body.homePage .hero.videoReady .heroTitle:hover .tone1,
body.homePage .hero.videoReady .heroTitle:hover .tone2,
body.homePage .hero.videoReady .heroTitle:hover .tone3,
body.homePage .hero.videoReady .heroTitle:hover .tone4{
background-position:100% 50% !important;
}
body.homePage .hero.videoReady .heroTitle:hover .heroLetter{
transform:none !important;
filter:brightness(1.08) saturate(1.05);
}
body.homePage .hero.videoReady .heroTitle:hover .heroWord .heroLetter:nth-child(2n),
body.homePage .hero.videoReady .heroTitle:hover .heroWord .heroLetter:nth-child(3n){
transform:none !important;
}
}
body.homePage #produktwelt{
padding-top:88px !important;
background:linear-gradient(180deg,#eefaff,#fbfeff 50%,#edf9fe) !important;
}
body.homePage #produktwelt .center{max-width:850px;margin:0 auto 42px;}
body.homePage #produktwelt .center .k{color:#35a4d5 !important;letter-spacing:.11em;}
body.homePage #produktwelt .center p:last-child{color:#6d8798;max-width:none;}
body.homePage #produktwelt .worldGrid{gap:24px;}
body.homePage #produktwelt .worldCard{
border:1px solid rgba(70,148,187,.16);
box-shadow:0 18px 54px rgba(62,125,155,.10);
}
body.homePage #produktwelt .worldCard:hover{
transform:translateY(-6px);
box-shadow:0 24px 62px rgba(62,125,155,.15);
}
body.homePage #produktwelt .shade{
background:linear-gradient(180deg,rgba(15,53,74,.02),rgba(15,53,74,.84));
}
/* Right glass: adapted from the Domains hero language */
body.homePage .hero.videoReady .heroGlassNote{
position:relative;
overflow:hidden;
align-self:center !important;
margin:0 !important;
max-width:none !important;
min-height:260px;
padding:26px !important;
border-radius:28px !important;
border:1px solid rgba(255,255,255,.86) !important;
background:
linear-gradient(145deg,rgba(255,255,255,.58),rgba(255,255,255,.27)),
radial-gradient(circle at 15% 10%,rgba(134,223,255,.30),transparent 36%),
radial-gradient(circle at 90% 90%,rgba(96,157,235,.15),transparent 40%) !important;
-webkit-backdrop-filter:blur(24px) saturate(145%) !important;
backdrop-filter:blur(24px) saturate(145%) !important;
box-shadow:0 22px 60px rgba(45,110,145,.14),inset 0 1px 0 rgba(255,255,255,.96) !important;
animation:none !important;
}
body.homePage .hero.videoReady .heroGlassNote::before{
content:"";
position:absolute;
width:170px;
height:170px;
right:-55px;
top:-60px;
border-radius:50%;
background:radial-gradient(circle,rgba(89,169,235,.22),transparent 68%);
pointer-events:none;
}
body.homePage .heroGlassTop{
position:relative;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:18px;
}
body.homePage .heroGlassEyebrow{
display:block;
margin-bottom:5px;
color:#4388a9 !important;
font-size:11px !important;
font-weight:850;
letter-spacing:.1em !important;
text-transform:uppercase;
}
body.homePage .heroGlassTop strong{
display:block;
margin:0 !important;
color:#173b55 !important;
font-size:22px !important;
line-height:1.18 !important;
letter-spacing:-.025em;
}
body.homePage .heroGlassLive{
position:relative;
display:inline-flex !important;
align-items:center;
gap:7px;
flex:0 0 auto;
white-space:nowrap;
padding:7px 10px;
border:1px solid rgba(94,173,207,.20);
border-radius:999px;
background:rgba(255,255,255,.46);
color:#54788d !important;
font-size:11px !important;
font-weight:750;
letter-spacing:0 !important;
}
body.homePage .heroGlassLive i{
width:7px;
height:7px;
border-radius:50%;
background:#50c7a8;
box-shadow:0 0 0 4px rgba(80,199,168,.12);
}
body.homePage .heroGlassPills{
position:relative;
display:grid;
grid-template-columns:1fr 1fr;
gap:9px;
margin-bottom:16px;
}
body.homePage .heroGlassPills span{
display:block;
padding:11px 12px;
border:1px solid rgba(255,255,255,.82);
border-radius:15px;
background:rgba(255,255,255,.43);
box-shadow:inset 0 1px 0 rgba(255,255,255,.76);
color:#315f77 !important;
font-size:12px !important;
font-weight:800;
letter-spacing:0 !important;
}
body.homePage .hero.videoReady .heroGlassNote p{
position:relative;
margin:0 !important;
color:#6c8999 !important;
font-size:12px !important;
line-height:1.5 !important;
}
body.homePage .hero.videoReady .lead{color:#3f6a82 !important;}
body.homePage .hero.videoReady .heroActions{margin-top:28px;}
/* Return hero buttons to the lighter V199 visual language */
body.homePage .hero.videoReady .glass{
background:linear-gradient(135deg,rgba(91,193,235,.78),rgba(134,223,255,.70)) !important;
border:1px solid rgba(255,255,255,.9) !important;
box-shadow:0 12px 32px rgba(62,163,209,.19),inset 0 1px 0 rgba(255,255,255,.75) !important;
}
body.homePage .hero.videoReady .ghost{
background:rgba(255,255,255,.72) !important;
color:#337496 !important;
border:1px solid rgba(65,145,185,.18) !important;
box-shadow:none !important;
}
@media(max-width:1180px){
body.homePage .hero.videoReady .heroGrid{grid-template-columns:1fr !important;}
body.homePage .hero.videoReady .heroGlassNote{max-width:560px !important;margin-top:12px !important;}
}
@media(max-width:760px){
body.homePage .hero.videoReady{padding:72px 0 80px !important;}
body.homePage .hero.videoReady .heroCopy{padding:0 !important;}
body.homePage .hero.videoReady .heroGlassNote{padding:20px !important;border-radius:22px !important;min-height:0;}
body.homePage .heroGlassTop{flex-direction:column;}
body.homePage .heroGlassPills{grid-template-columns:1fr 1fr;}
body.homePage #produktwelt{padding-top:66px !important;}
}
/* =========================================================
V205 — Connect greener, brighter, clearer + homepage card synced
========================================================= */
body.connectPage .connectSystemHero{
background-image:
linear-gradient(90deg,
rgba(255,255,255,.09) 0%,
rgba(247,255,251,.05) 42%,
rgba(255,255,255,0) 100%),
url('images/connect-hero-network.png');
background-size:cover,cover;
background-repeat:no-repeat,no-repeat;
background-position:left top,left top;
background-blend-mode:screen,normal;
background-color:#d9f7ef;
animation:connectHeroPan 18s ease-in-out infinite alternate;
}
@keyframes connectHeroPan{
from{background-position:left top,left top;}
to{background-position:left 2% top,left 2% top;}
}
body.connectPage .connectSystemHero::before{
background:
radial-gradient(circle at 10% 9%,rgba(255,239,176,.23),transparent 17%),
linear-gradient(90deg,
rgba(247,252,249,.28) 0%,
rgba(241,250,246,.16) 26%,
rgba(225,245,239,.05) 54%,
rgba(8,53,80,.03) 100%),
linear-gradient(180deg,rgba(255,255,255,.03),rgba(6,49,39,.06));
}
body.connectPage .connectSystemCopy::before{
background:radial-gradient(ellipse at 42% 48%,rgba(241,251,246,.48) 0%,rgba(233,247,240,.18) 50%,rgba(233,246,251,0) 76%);
filter:blur(6px);
}
body.connectPage .connectSystemCopy .k,
body.connectPage .connectClassicStatement .k,
body.connectPage .connectQuickLinks .k,
body.connectPage .ctaBand .k{
color:#2dac80 !important;
}
body.connectPage .connectSystemCopy h1{
background:linear-gradient(90deg,#7ad68c 0%,#53cb8d 19%,#2dbd96 43%,#19a89d 70%,#a8efe0 100%);
background-size:180% 100%;
background-position:0% 50%;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
display:inline-block;
animation:connectHeadlineSweep 7.6s ease-in-out infinite alternate;
filter:drop-shadow(0 8px 18px rgba(14,88,70,.18));
}
@keyframes connectHeadlineSweep{
from{background-position:0% 50%;}
to{background-position:100% 50%;}
}
body.connectPage .connectSystemCopy .lead{
color:#2d5e54;
text-shadow:0 1px 12px rgba(255,255,255,.42);
}
body.connectPage .connectHeroGlass{
background:
linear-gradient(145deg,rgba(255,255,255,.70),rgba(240,252,247,.34)),
radial-gradient(circle at 15% 8%,rgba(98,217,156,.30),transparent 35%),
radial-gradient(circle at 88% 90%,rgba(58,201,175,.18),transparent 42%);
border:1px solid rgba(255,255,255,.92);
box-shadow:0 24px 68px rgba(20,86,74,.15),inset 0 1px 0 rgba(255,255,255,.98);
}
body.connectPage .connectHeroGlassTop span{color:#33a884;}
body.connectPage .connectHeroGlassTop strong{color:#165545;}
body.connectPage .connectLiveDot{
background:#4fd08d;
box-shadow:0 0 0 7px rgba(79,208,141,.14);
}
@keyframes connectDotPulse{50%{transform:scale(1.15);box-shadow:0 0 0 12px rgba(79,208,141,.07)}}
body.connectPage .connectOrbit span{border-color:rgba(69,184,150,.22);}
body.connectPage .connectGlassItem{
border:1px solid rgba(255,255,255,.86);
background:rgba(255,255,255,.50);
box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 12px 28px rgba(42,118,97,.06);
}
body.connectPage .connectGlassItem b{color:#155645;}
body.connectPage .connectGlassItem small{color:#638378;}
body.connectPage .connectGlassItem:hover{
transform:translateY(-3px);
background:rgba(247,255,250,.80);
box-shadow:0 18px 34px rgba(42,118,97,.10),inset 0 1px 0 rgba(255,255,255,.92);
}
body.connectPage .connectHeroLinkRow{color:#6f8f82;}
body.connectPage .connectHeroLinkRow a,
body.connectPage .connectShowcaseCopy span,
body.connectPage .connectShowcaseCopy strong,
body.connectPage .connectPillCard span{
color:#219c78;
}
body.connectPage .connectClassicStatement h2,
body.connectPage .connectQuickLinks h2,
body.connectPage .ctaBand h2,
body.connectPage .connectPillCard strong{
color:#174e42;
}
body.connectPage .connectShowcaseCard,
body.connectPage .connectPillCard{
border-color:rgba(72,172,136,.16);
box-shadow:0 18px 54px rgba(40,110,92,.09);
}
body.connectPage .connectShowcaseCard:hover,
body.connectPage .connectPillCard:hover{
box-shadow:0 24px 62px rgba(35,106,88,.14);
}
body.connectPage .connectShowcaseMedia img{
filter:saturate(1.08) brightness(1.05) contrast(1.02);
}
body.connectPage .connectShowcaseMedia:after,
body.connectPage .connectShowcaseMini .connectShowcaseMedia::before,
body.connectPage .connectShowcaseMini .connectShowcaseMedia:after{
background:linear-gradient(180deg,rgba(10,57,44,.03),rgba(9,62,49,.76));
}
body.connectPage .connectTagRow b{
border-color:rgba(76,187,144,.18);
background:rgba(245,255,249,.82);
color:#2d715c;
}
body.connectPage .ctaBand{
background:linear-gradient(135deg,rgba(224,250,240,.88),rgba(243,252,248,.94));
border:1px solid rgba(82,191,149,.18);
}
body.connectPage .ctaBand .glass{
background:linear-gradient(135deg,rgba(92,201,161,.85),rgba(109,227,186,.74)) !important;
color:#0f2f27 !important;
box-shadow:0 14px 32px rgba(56,162,124,.18),inset 0 1px 0 rgba(255,255,255,.74) !important;
}
body.connectPage .ctaBand .glass:hover{
box-shadow:0 18px 40px rgba(56,162,124,.24),inset 0 1px 0 rgba(255,255,255,.74) !important;
}
/* Homepage: use the same real Connect image instead of the old SVG artwork */
body.homePage .connectCard img{
filter:saturate(1.08) brightness(1.08) contrast(1.02);
}
body.homePage .connectCard .shade{
background:linear-gradient(180deg,rgba(9,63,49,.01),rgba(7,79,61,.78)) !important;
}
body.homePage .connectCard .worldText span{color:#cdeee3;}
body.homePage .connectCard .worldText b{color:#dffcf2;}
/* =========================================================
V206 — latest Connect image on homepage + connect page, sun visible
========================================================= */
body.connectPage .connectSystemHero{
background-position:left top,left top !important;
background-size:cover,cover !important;
}
@keyframes connectHeroPan{
from{background-position:left top,left top;}
to{background-position:left 1.25% top,left 1.25% top;}
}
@media(max-width:1000px){
body.connectPage .connectSystemHero{
background-position:left top,left top !important;
}
}
@media(max-width:620px){
body.connectPage .connectSystemHero{
background-position:left top,left top !important;
}
}
body.homePage .connectCard img{
object-position:left top !important;
filter:saturate(1.10) brightness(1.08) contrast(1.03) !important;
}
body.homePage .connectCard .shade{
background:
linear-gradient(90deg,rgba(8,51,67,.28) 0%,rgba(8,51,67,.14) 38%,rgba(8,51,67,.04) 100%),
linear-gradient(180deg,rgba(8,58,45,.06),rgba(7,76,59,.74)) !important;
}
body.homePage .connectCard .worldText{
text-shadow:0 2px 18px rgba(7,42,55,.34);
}
/* =========================================================
V207 — Connect crop tuning for homepage + ultrawide displays
========================================================= */
body.connectPage .connectSystemHero{
--connect-bg-y:0%;
background-position:left var(--connect-bg-y),left var(--connect-bg-y) !important;
}
@keyframes connectHeroPan{
from{background-position:left var(--connect-bg-y),left var(--connect-bg-y);}
to{background-position:1.25% var(--connect-bg-y),1.25% var(--connect-bg-y);}
}
/* Very wide / 49-inch style windows: move the crop down so islands stay visible. */
@media(min-width:2200px){
body.connectPage .connectSystemHero{--connect-bg-y:18%;}
}
@media(min-width:3200px){
body.connectPage .connectSystemHero{--connect-bg-y:24%;}
}
/* Homepage card: less full sun, more islands and turquoise water. */
body.homePage .connectCard img{
object-position:0% 30% !important;
}
@media(max-width:760px){
body.homePage .connectCard img{object-position:0% 34% !important;}
}
/* =========================================================
V208 — Connect ultra-wide fix: show more image instead of feeling zoomed
========================================================= */
body.connectPage .connectSystemHero{
--connect-bg-x:0%;
--connect-bg-y:0%;
background-position:var(--connect-bg-x) var(--connect-bg-y),var(--connect-bg-x) var(--connect-bg-y) !important;
}
@keyframes connectHeroPan{
from{background-position:var(--connect-bg-x) var(--connect-bg-y),var(--connect-bg-x) var(--connect-bg-y);}
to{background-position:calc(var(--connect-bg-x) + 1.1%) var(--connect-bg-y),calc(var(--connect-bg-x) + 1.1%) var(--connect-bg-y);}
}
/* Wide desktop: slightly taller so the crop feels more natural. */
@media(min-width:1800px){
body.connectPage .connectSystemHero{
min-height:720px;
padding:84px 0 96px;
--connect-bg-y:8%;
}
body.connectPage .connectSystemHeroShell{min-height:540px;}
}
/* Very wide / 49-inch windows: make the hero taller and move the crop only a bit down. */
@media(min-width:2200px){
body.connectPage .connectSystemHero{
min-height:820px;
padding:92px 0 104px;
--connect-bg-y:10%;
}
body.connectPage .connectSystemHeroShell{min-height:620px;}
}
@media(min-width:3200px){
body.connectPage .connectSystemHero{
min-height:920px;
padding:102px 0 112px;
--connect-bg-y:12%;
}
body.connectPage .connectSystemHeroShell{min-height:700px;}
}
@media(min-width:4200px){
body.connectPage .connectSystemHero{
min-height:980px;
padding:110px 0 120px;
--connect-bg-y:13%;
}
body.connectPage .connectSystemHeroShell{min-height:740px;}
}
/* =========================================================
V209 — Connect full-width size aligned with other tabs
========================================================= */
/* Reset the V208 ultra-wide enlargement. Keep Connect visually like Business/Infrastructure on full-width. */
body.connectPage .connectSystemHero{
min-height:650px;
padding:76px 0 84px;
}
body.connectPage .connectSystemHeroShell{
min-height:490px;
}
@media(min-width:1800px){
body.connectPage .connectSystemHero{
min-height:650px !important;
padding:76px 0 84px !important;
--connect-bg-y:8%;
}
body.connectPage .connectSystemHeroShell{
min-height:490px !important;
}
}
@media(min-width:2200px){
body.connectPage .connectSystemHero{
min-height:650px !important;
padding:76px 0 84px !important;
--connect-bg-y:10%;
}
body.connectPage .connectSystemHeroShell{
min-height:490px !important;
}
}
@media(min-width:3200px){
body.connectPage .connectSystemHero{
min-height:650px !important;
padding:76px 0 84px !important;
--connect-bg-y:11%;
}
body.connectPage .connectSystemHeroShell{
min-height:490px !important;
}
}
@media(min-width:4200px){
body.connectPage .connectSystemHero{
min-height:650px !important;
padding:76px 0 84px !important;
--connect-bg-y:11.5%;
}
body.connectPage .connectSystemHeroShell{
min-height:490px !important;
}
}
/* =========================================================
V210 — Connect lower labels/buttons back to original blue
Upper Connect headings/eyebrows stay green.
========================================================= */
body.connectPage .connectShowcaseCopy strong,
body.connectPage .connectShowcaseMini .connectShowcaseCopy strong{
color:#268ebb !important;
}
body.connectPage .connectTagRow b{
border-color:rgba(113,184,213,.18) !important;
background:rgba(240,249,254,.90) !important;
color:#38627a !important;
}
/* =========================================================
V215 — homepage hero glass pills refined + subtle network structure below
========================================================= */
body.homePage .hero.videoReady{
position:relative;
overflow:hidden;
}
body.homePage .hero.videoReady::after{
content:"";
position:absolute;
left:50%;
bottom:-18px;
transform:translateX(-2%);
width:min(920px,72vw);
height:240px;
pointer-events:none;
z-index:0;
opacity:.46;
background:
radial-gradient(circle at 12% 64%,rgba(103,205,241,.72) 0 3px,transparent 4px),
radial-gradient(circle at 29% 82%,rgba(108,220,241,.65) 0 3px,transparent 4px),
radial-gradient(circle at 46% 48%,rgba(118,222,255,.70) 0 3px,transparent 4px),
radial-gradient(circle at 63% 74%,rgba(124,216,241,.68) 0 3px,transparent 4px),
radial-gradient(circle at 81% 56%,rgba(135,228,255,.72) 0 3px,transparent 4px),
linear-gradient(120deg,transparent 11%,rgba(122,219,251,.18) 12%,rgba(122,219,251,.18) 12.7%,transparent 13.4%),
linear-gradient(164deg,transparent 27%,rgba(116,210,241,.16) 28%,rgba(116,210,241,.16) 28.8%,transparent 29.5%),
linear-gradient(102deg,transparent 42%,rgba(121,214,244,.16) 43%,rgba(121,214,244,.16) 43.8%,transparent 44.5%),
linear-gradient(148deg,transparent 58%,rgba(105,204,233,.14) 59%,rgba(105,204,233,.14) 59.8%,transparent 60.6%),
linear-gradient(92deg,transparent 73%,rgba(109,214,247,.14) 74%,rgba(109,214,247,.14) 74.8%,transparent 75.4%);
filter:blur(.2px);
}
body.homePage .hero.videoReady .heroGrid{position:relative;z-index:1;}
body.homePage .hero.videoReady .heroGlassNote{
background:
linear-gradient(145deg,rgba(255,255,255,.64),rgba(252,254,255,.30)),
radial-gradient(circle at 15% 10%,rgba(134,223,255,.32),transparent 36%),
radial-gradient(circle at 90% 90%,rgba(96,157,235,.16),transparent 40%) !important;
box-shadow:0 26px 64px rgba(45,110,145,.16),inset 0 1px 0 rgba(255,255,255,.96) !important;
}
body.homePage .hero.videoReady .heroGlassNote::after{
content:"";
position:absolute;
inset:auto 18px 14px 18px;
height:1px;
background:linear-gradient(90deg,rgba(123,206,239,0),rgba(123,206,239,.44),rgba(123,206,239,0));
pointer-events:none;
}
body.homePage .heroGlassPills{
gap:11px;
margin-bottom:18px;
}
body.homePage .heroGlassPills span{
position:relative;
overflow:hidden;
padding:12px 14px 12px 36px;
border:1px solid rgba(255,255,255,.84);
border-radius:16px;
background:
linear-gradient(135deg,rgba(255,255,255,.60),rgba(239,249,255,.40)),
linear-gradient(90deg,rgba(104,197,235,.06),rgba(134,223,255,.14));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.82),
0 8px 24px rgba(67,136,173,.08);
color:#2f6078 !important;
font-size:12px !important;
font-weight:800;
letter-spacing:0 !important;
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
body.homePage .heroGlassPills span::before{
content:"";
position:absolute;
left:13px;
top:50%;
width:10px;
height:10px;
border-radius:50%;
transform:translateY(-50%);
background:linear-gradient(180deg,#6ed0f5,#52bce8);
box-shadow:0 0 0 5px rgba(95,194,234,.12),0 0 18px rgba(95,194,234,.22);
}
body.homePage .heroGlassPills span::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(115deg,transparent 24%,rgba(255,255,255,.40) 47%,transparent 68%);
transform:translateX(-125%);
transition:transform .6s ease;
pointer-events:none;
}
body.homePage .heroGlassPills span:hover{
transform:translateY(-2px);
border-color:rgba(114,207,242,.34);
background:
linear-gradient(135deg,rgba(255,255,255,.74),rgba(238,250,255,.54)),
linear-gradient(90deg,rgba(104,197,235,.12),rgba(134,223,255,.18));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.88),
0 14px 28px rgba(67,136,173,.12);
}
body.homePage .heroGlassPills span:hover::after{
transform:translateX(125%);
}
body.homePage .heroGlassPills span:nth-child(1)::before{background:linear-gradient(180deg,#57bee7,#3aa6d6);}
body.homePage .heroGlassPills span:nth-child(2)::before{background:linear-gradient(180deg,#8bdcf6,#5abde9);}
body.homePage .heroGlassPills span:nth-child(3)::before{background:linear-gradient(180deg,#5fc4ff,#3fa3da);}
body.homePage .heroGlassPills span:nth-child(4)::before{background:linear-gradient(180deg,#70d7df,#4dc1d3);}
body.homePage .hero.videoReady .heroGlassNote p{
color:#678596 !important;
}
@media(max-width:1180px){
body.homePage .hero.videoReady::after{
width:min(760px,92vw);
height:190px;
left:54%;
bottom:-10px;
opacity:.38;
}
}
@media(max-width:760px){
body.homePage .hero.videoReady::after{
width:96vw;
height:150px;
left:50%;
bottom:-8px;
opacity:.28;
}
body.homePage .heroGlassPills span{
padding:11px 12px 11px 34px;
}
}
/* =========================================================
V216 — compact internet availability check
========================================================= */
body.internetPage .compactAvailability{
gap:11px;
padding:24px 26px;
max-width:520px;
}
body.internetPage .compactAvailability>strong{
margin-bottom:2px;
font-size:26px;
}
body.internetPage .compactAvailability label{
gap:6px;
font-size:12px;
}
body.internetPage .compactAvailability input{
min-height:44px;
padding:11px 13px;
border-radius:13px;
}
body.internetPage .availabilityRow{
display:grid;
grid-template-columns:.72fr 1.28fr;
gap:10px;
}
body.internetPage .compactAvailability .firstTalk{
width:100%;
min-height:44px;
margin-top:2px;
}
@media(max-width:620px){
body.internetPage .availabilityRow{grid-template-columns:1fr;}
body.internetPage .compactAvailability{padding:22px 20px;}
}
/* =========================================================
V217 — infrastructure cards icon + accent line match title palette
========================================================= */
body.infrastructurePage #infrastructure-solutions .serviceCard .serviceBody::before{
background:linear-gradient(100deg,#3d3832 0%,#9c5b32 28%,#e78b45 58%,#f36f5d 78%,#d4a34b 100%) !important;
box-shadow:0 8px 18px rgba(181,112,61,.18);
opacity:1 !important;
}
body.infrastructurePage #infrastructure-solutions .serviceCard .overviewIcon,
body.infrastructurePage .serviceCard:nth-child(1) .overviewIcon,
body.infrastructurePage .serviceCard:nth-child(2) .overviewIcon,
body.infrastructurePage .serviceCard:nth-child(3) .overviewIcon,
body.infrastructurePage .serviceCard:nth-child(4) .overviewIcon{
background:linear-gradient(135deg,#554239 0%,#9f5f35 28%,#e48845 58%,#f06f5d 82%,#d7a34c 100%) !important;
color:#fff !important;
box-shadow:0 14px 28px rgba(167,101,54,.22), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
/* =========================================================
V218 — SU-IT legal pages + unified legal footer
========================================================= */
.footer .footGrid{grid-template-columns:1.25fr repeat(4,minmax(0,1fr));gap:28px;}
.footer .footerLegal a{white-space:nowrap;}
body.legal-page{font-family:Manrope,Arial,"Segoe UI",sans-serif;background:#fff;color:#20262b;}
body.legal-page main{font-family:Manrope,Arial,"Segoe UI",sans-serif;}
.legalMain{padding:58px 0 96px;background:linear-gradient(180deg,#fbfdfe 0%,#fff 18%,#fff 100%);}
.legalContainer{width:min(960px,calc(100% - 40px));margin:0 auto;}
.legalBreadcrumb{display:flex;align-items:center;gap:9px;margin:0 0 44px;font-size:13px;color:#7a8992;}
.legalBreadcrumb a{color:#527589;text-decoration:none;transition:color .18s ease;}
.legalBreadcrumb a:hover,.legalBreadcrumb a:focus-visible{color:#1685b9;text-decoration:underline;text-underline-offset:3px;}
.legalHeader{max-width:820px;margin-bottom:56px;}
.legalEyebrow{margin:0 0 12px;color:#3e839f;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
body.legal-page .legalHeader h1{margin:0 0 18px;font-family:Manrope,Arial,"Segoe UI",sans-serif!important;font-size:clamp(42px,6vw,68px);line-height:1.04;letter-spacing:-.045em;color:#171c20;}
.legalHeader>p:last-child{margin:0;max-width:720px;font-size:18px;line-height:1.72;color:#5d6970;}
.legalContent{max-width:900px;}
.legalContent section{margin:0 0 44px;padding:0;}
body.legal-page .legalContent h2{margin:0 0 15px;font-family:Manrope,Arial,"Segoe UI",sans-serif!important;font-size:clamp(22px,2.6vw,29px);line-height:1.25;letter-spacing:-.025em;color:#1d2327;}
.legalContent p,.legalContent li,.legalContent address{font-size:16px;line-height:1.82;color:#3e474c;}
.legalContent p{margin:0 0 16px;}
.legalContent address{margin:0 0 18px;font-style:normal;}
.legalContent ul{margin:6px 0 18px;padding-left:23px;}
.legalContent li{margin:5px 0;}
.legalContent a{color:#246f91;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .18s ease;}
.legalContent a:hover,.legalContent a:focus-visible{color:#0e8ec5;}
.legalUpdated{margin-top:58px!important;padding-top:22px;border-top:1px solid rgba(45,77,93,.12);color:#68767e!important;font-size:14px!important;}
.legalPending{max-width:780px;}
.legalNote{margin-top:36px!important;padding-top:22px;border-top:1px solid rgba(45,77,93,.12);color:#5f6b71!important;}
@media(max-width:1180px){.footer .footGrid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:760px){.legalMain{padding:38px 0 70px;}.legalContainer{width:min(100% - 30px,960px);}.legalBreadcrumb{margin-bottom:30px;}.legalHeader{margin-bottom:42px;}.legalHeader>p:last-child{font-size:16px;}.legalContent section{margin-bottom:36px;}.legalContent p,.legalContent li,.legalContent address{font-size:15px;line-height:1.76;}.footer .footGrid{grid-template-columns:1fr;gap:26px;}.footer .footerLegal a{white-space:normal;}}
/* =========================================================
V219 — soft-launch notice + richer Connect topic cards
========================================================= */
.sitePhaseNotice{
padding:18px 0 0;
}
.sitePhaseNotice .shell{
max-width:1240px;
}
.sitePhaseNotice p{
margin:0;
padding:14px 18px;
border:1px solid rgba(116,177,206,.18);
border-radius:18px;
background:linear-gradient(135deg,rgba(247,251,255,.94),rgba(240,249,255,.96));
color:#4f6d82;
font-size:14px;
line-height:1.65;
box-shadow:0 10px 28px rgba(66,118,154,.05);
}
.sitePhaseNotice strong{color:#173b55;}
.sitePhaseNotice a{font-weight:800;color:#268ebb;}
.sitePhaseNotice a:hover{color:#1f769a;}
.footStatus{
margin-top:12px;
color:#7b91a2;
line-height:1.65;
max-width:320px;
}
@media(max-width:640px){
.sitePhaseNotice{padding:12px 0 0;}
.sitePhaseNotice p{padding:13px 14px;font-size:13px;border-radius:16px;}
}
body.connectPage .connectPillGrid{
grid-template-columns:repeat(5,minmax(0,1fr));
gap:18px;
}
body.connectPage .connectPillCard{
position:relative;
overflow:hidden;
min-height:178px;
justify-content:flex-end;
gap:10px;
padding:18px 18px 20px;
isolation:isolate;
background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,252,255,.98));
}
body.connectPage .connectPillCard::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.00) 24%,rgba(10,37,56,.14) 100%),
linear-gradient(145deg,var(--cardTintA,rgba(29,137,194,.66)),var(--cardTintB,rgba(23,103,165,.66)));
opacity:.88;
z-index:0;
}
body.connectPage .connectPillCard::after{
content:"";
position:absolute;
inset:0;
background-image:var(--cardImage);
background-size:cover;
background-position:center;
opacity:.34;
transform:scale(1.02);
z-index:-1;
}
body.connectPage .connectPillCard > *{position:relative;z-index:1;}
body.connectPage .connectPillCard span{
width:42px;height:42px;
background:rgba(255,255,255,.90);
color:var(--cardNumber,#1e89bd);
box-shadow:0 8px 20px rgba(7,30,45,.12);
}
body.connectPage .connectPillCard strong,
body.connectPage .connectPillCard small{
color:#fff !important;
text-shadow:0 2px 12px rgba(7,24,37,.22);
}
body.connectPage .connectPillCard strong{font-size:22px;}
body.connectPage .connectPillCard small{font-size:13px;line-height:1.55;opacity:.96;max-width:20ch;}
body.connectPage .connectPillCard:hover{transform:translateY(-6px);}
body.connectPage .pillInternet{
--cardImage:url('images/thun-digital.jpg');
--cardTintA:rgba(21,172,213,.72); --cardTintB:rgba(20,92,173,.70); --cardNumber:#1e89bd;
}
body.connectPage .pillTelefonie{
--cardImage:url('images/business-homepage-team.png');
--cardTintA:rgba(42,176,196,.70); --cardTintB:rgba(34,111,169,.68); --cardNumber:#2a93bb;
}
body.connectPage .pillVoip{
--cardImage:url('images/hd-workplace-team.jpg');
--cardTintA:rgba(45,152,202,.72); --cardTintB:rgba(56,128,174,.72); --cardNumber:#2f87c2;
}
body.connectPage .pillMobile{
--cardImage:url('images/workplace-homepage-team.png');
--cardTintA:rgba(50,187,173,.70); --cardTintB:rgba(43,145,135,.70); --cardNumber:#2fb09b;
}
body.connectPage .pillDomains{
--cardImage:url('images/connect-hero-network.png');
--cardTintA:rgba(44,177,148,.72); --cardTintB:rgba(35,117,164,.68); --cardNumber:#27a88b;
}
body.connectPage .connectShowcaseMini{
position:relative;
}
body.connectPage .connectShowcaseMini::after{
content:"";
position:absolute;
left:22px; right:22px; top:0;
height:4px;
border-radius:999px;
background:linear-gradient(90deg,var(--miniA,#66c2ea),var(--miniB,#58a1dc));
z-index:2;
}
body.connectPage .connectShowcaseMini .connectShowcaseCopy span{
color:var(--miniA,#219c78) !important;
}
body.connectPage .connectShowcaseMini .connectShowcaseMedia img{
filter:saturate(1.08) brightness(1.05) contrast(1.03);
}
body.connectPage .connectShowcaseMini .connectShowcaseMedia::before{
background:linear-gradient(180deg,rgba(12,38,49,.04),rgba(10,43,61,.34)) !important;
}
body.connectPage .connectShowcaseMini .connectShowcaseMedia::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,var(--miniMediaTint,rgba(26,142,194,.32)) 100%);
}
body.connectPage .showcaseMobile{--miniA:#2abf9b;--miniB:#27989f;--miniMediaTint:rgba(32,170,145,.34);}
body.connectPage .showcaseDomains{--miniA:#2dbb8b;--miniB:#2f86c2;--miniMediaTint:rgba(41,156,176,.34);}
body.connectPage .showcaseVoip{--miniA:#3a9fe4;--miniB:#528ddf;--miniMediaTint:rgba(46,127,187,.34);}
body.connectPage .showcaseInternet{--miniA:#33a9d8;--miniB:#2d76bf;--miniMediaTint:rgba(44,131,198,.28);}
body.connectPage .showcaseTelefonie{--miniA:#2eb4c2;--miniB:#4287c8;--miniMediaTint:rgba(40,140,196,.30);}
@media(max-width:1080px){
body.connectPage .connectPillGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:680px){
body.connectPage .connectPillGrid{grid-template-columns:1fr;}
body.connectPage .connectPillCard{min-height:154px;}
}
/* =========================================================
V220 — self-hosted Manrope webfont (no Google Fonts request)
========================================================= */
@font-face{
font-family:"Manrope";
src:url("fonts/Manrope-Variable.woff2") format("woff2");
font-style:normal;
font-weight:200 800;
font-display:swap;
}
:root{
--suit-body-font:"Manrope",Arial,"Segoe UI",sans-serif;
}
html,body,button,input,select,textarea{font-family:var(--suit-body-font)!important;}
/* ============================================================
Microsoft Migration Map – CSP safe point positions
============================================================ */
.microsoftSolutionsPage .msMapPoint1{left:13%;top:55%}
.microsoftSolutionsPage .msMapPoint2{left:26%;top:30%}
.microsoftSolutionsPage .msMapPoint3{left:39%;top:62%}
.microsoftSolutionsPage .msMapPoint4{left:52%;top:32%}
.microsoftSolutionsPage .msMapPoint5{left:65%;top:62%}
.microsoftSolutionsPage .msMapPoint6{left:78%;top:32%}
.microsoftSolutionsPage .msMapPoint7{left:85%;top:55%}
.microsoftSolutionsPage .msMapPoint{
z-index:3;
}
.microsoftSolutionsPage .msMapLabel{
position:relative;
z-index:4;
}
.microsoftSolutionsPage .msMapNum{
position:relative;
z-index:5;
}
/* =========================================================
SU-IT CANONICAL MOBILE – CHECKOUT + MICROSOFT MIGRATION
========================================================= */
@media (max-width:760px){
/* ---------- CHECKOUT ---------- */
body.checkoutPage{
overflow-x:hidden;
}
.checkoutPage .checkoutBody{
display:flex !important;
flex-direction:column !important;
width:100% !important;
gap:20px !important;
}
.checkoutPage .checkoutPanel{
order:1 !important;
width:100% !important;
min-width:0 !important;
padding:20px !important;
}
.checkoutPage .checkoutAside{
order:2 !important;
position:static !important;
inset:auto !important;
width:100% !important;
min-width:0 !important;
border-left:0 !important;
margin:0 !important;
}
.checkoutPage .checkoutMiniSummary{
width:100% !important;
min-width:0 !important;
padding:18px !important;
}
.checkoutPage .checkoutSteps{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin-bottom:22px !important;
}
.checkoutPage .checkoutSteps li{
min-width:0 !important;
width:100% !important;
padding:10px !important;
white-space:normal !important;
font-size:12px !important;
}
.checkoutPage .checkoutFields,
.checkoutPage .ckChoice{
grid-template-columns:1fr !important;
}
/* Kundentyp – Desktop-Slider auf Mobile deaktivieren */
.checkoutPage .audienceToggle{
position:static !important;
left:auto !important;
transform:none !important;
width:100% !important;
max-width:none !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:8px !important;
padding:5px !important;
margin:0 0 22px !important;
}
.checkoutPage .audienceToggle::before{
display:none !important;
content:none !important;
}
.checkoutPage .audienceBtn{
width:100% !important;
min-width:0 !important;
padding:11px 8px !important;
font-size:13px !important;
text-align:center !important;
}
.checkoutPage .audienceBtn.active{
color:#fff !important;
background:linear-gradient(135deg,#45bdeb,#86dfff) !important;
box-shadow:0 8px 20px rgba(69,189,235,.24) !important;
}
.checkoutPage .ckField,
.checkoutPage .ckField input,
.checkoutPage .ckField select,
.checkoutPage .ckField textarea{
width:100% !important;
min-width:0 !important;
}
.checkoutPage .ckField.wide{
grid-column:auto !important;
}
/* ---------- MICROSOFT MIGRATION ---------- */
.microsoftSolutionsPage .msMapWrap{
overflow:visible !important;
margin-top:22px !important;
}
.microsoftSolutionsPage .msMapScroll{
width:100% !important;
min-width:0 !important;
aspect-ratio:auto !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
}
/* Schatzkarte nur Desktop/Tablet */
.microsoftSolutionsPage .msMapArt{
display:none !important;
}
.microsoftSolutionsPage .msMapPoint,
.microsoftSolutionsPage .msMapPoint1,
.microsoftSolutionsPage .msMapPoint2,
.microsoftSolutionsPage .msMapPoint3,
.microsoftSolutionsPage .msMapPoint4,
.microsoftSolutionsPage .msMapPoint5,
.microsoftSolutionsPage .msMapPoint6,
.microsoftSolutionsPage .msMapPoint7{
position:relative !important;
inset:auto !important;
left:auto !important;
top:auto !important;
transform:none !important;
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:32px minmax(0,1fr) !important;
align-items:start !important;
gap:11px !important;
padding:12px 14px !important;
text-align:left !important;
border:1px solid rgba(70,148,187,.15) !important;
border-radius:16px !important;
background:rgba(255,255,255,.92) !important;
box-shadow:0 8px 22px rgba(62,125,155,.07) !important;
}
.microsoftSolutionsPage .msMapNum{
width:30px !important;
height:30px !important;
min-width:30px !important;
margin:0 !important;
font-size:12px !important;
}
.microsoftSolutionsPage .msMapLabel{
min-width:0 !important;
padding:0 !important;
background:none !important;
border-radius:0 !important;
}
.microsoftSolutionsPage .msMapPoint strong{
display:block !important;
margin:1px 0 3px !important;
font-size:12px !important;
line-height:1.2 !important;
letter-spacing:.035em !important;
filter:none !important;
}
.microsoftSolutionsPage .msMapPoint p{
margin:0 !important;
font-size:11px !important;
line-height:1.38 !important;
filter:none !important;
}
.microsoftSolutionsPage .msMigrationTargets span{
font-size:12px !important;
line-height:1.25 !important;
padding:9px 12px !important;
}
.microsoftSolutionsPage .msWorkplaceStatement h2{
font-size:clamp(30px,9vw,42px) !important;
line-height:1.02 !important;
}
}
/* HTML hidden attribute must always win */
[hidden]{
display:none !important;
}
/* =========================================================
CHECKOUT MOBILE – NUMBER CHOICE CARDS
========================================================= */
@media (max-width:760px){
.checkoutPage .ckChoice{
display:grid !important;
grid-template-columns:1fr !important;
gap:14px !important;
}
.checkoutPage .ckChoiceCard{
position:relative !important;
display:grid !important;
grid-template-columns:28px minmax(0,1fr) !important;
column-gap:14px !important;
row-gap:3px !important;
padding:18px !important;
min-height:112px !important;
align-content:center !important;
}
.checkoutPage .ckChoiceCard input[type="radio"]{
position:static !important;
grid-column:1 !important;
grid-row:1 / span 2 !important;
width:22px !important;
height:22px !important;
min-width:22px !important;
min-height:22px !important;
margin:2px 0 0 !important;
align-self:start !important;
justify-self:center !important;
}
.checkoutPage .ckChoiceCard strong{
grid-column:2 !important;
grid-row:1 !important;
display:block !important;
margin:0 !important;
font-size:16px !important;
line-height:1.25 !important;
}
.checkoutPage .ckChoiceCard span{
grid-column:2 !important;
grid-row:2 !important;
display:block !important;
margin:2px 0 0 !important;
font-size:13px !important;
line-height:1.4 !important;
}
}
/* SUIT_LOGO_SIZE_FINAL_START */
/* Header-Logo – mittlere Größe zwischen alt und neu */
.topbar .brand img,
.brand img{
width:155px !important;
height:auto !important;
max-height:64px !important;
object-fit:contain !important;
object-position:left center !important;
}
/* Footer etwas größer als Header */
.footLogo{
width:175px !important;
height:auto !important;
}
/* Tablet */
@media(max-width:1100px){
.topbar .brand img,
.brand img{
width:148px !important;
max-height:60px !important;
}
}
/* Smartphone */
@media(max-width:760px){
.topbar .brand img,
.brand img{
width:138px !important;
max-height:56px !important;
}
.footLogo{
width:165px !important;
}
}
/* SUIT_LOGO_SIZE_FINAL_END */
/* MOBILE_TARIFF_V2_START */
/* Mobile-Karten bewusst nur auf der Mobile-Seite verändern */
#mobileTariffGrid{
align-items:stretch;
}
/* identische Kartenhöhe */
#mobileTariffGrid .tariffCard{
overflow:hidden;
padding:0 20px 22px;
min-height:430px;
display:flex;
flex-direction:column;
}
/* farbiger Kopf */
#mobileTariffGrid .tariffCard::before{
content:"";
display:block;
height:10px;
margin:0 -20px 18px;
border-radius:22px 22px 0 0;
background:linear-gradient(90deg,#86dfff,#55c9ec);
}
/* unterschiedliche leichte Akzente */
#mobileTariffGrid .tariffCard:nth-child(1)::before{
background:linear-gradient(90deg,#a9edf1,#69d9df);
}
#mobileTariffGrid .tariffCard:nth-child(2)::before{
background:linear-gradient(90deg,#90dcff,#5ebde9);
}
#mobileTariffGrid .tariffCard:nth-child(3)::before{
background:linear-gradient(90deg,#69cde9,#63aeea);
}
#mobileTariffGrid .tariffCard:nth-child(4)::before{
background:linear-gradient(90deg,#83bde8,#9d9eea);
}
/* Titel / Beschreibung erhalten feste Bereiche,
dadurch stehen alle Preise exakt auf einer Linie */
#mobileTariffGrid .tariffCard h3{
min-height:29px;
margin-top:0;
}
#mobileTariffGrid .tariffDesc{
min-height:48px;
display:flex;
align-items:flex-start;
line-height:1.45;
margin-bottom:14px;
}
/* Preiszeile überall identisch */
#mobileTariffGrid .tariffPrice{
min-height:42px;
align-items:baseline;
margin-top:0;
margin-bottom:3px;
}
#mobileTariffGrid .tariffPrice strong{
white-space:nowrap;
}
/* MWST-/Nettozeile gleiche Höhe */
#mobileTariffGrid .tariffVatNote{
min-height:28px;
margin-bottom:12px;
}
/* nur kurze Kernaussagen */
#mobileTariffGrid .tariffFeatures{
min-height:92px;
align-content:start;
margin-bottom:14px;
}
/* Aktivierung und Button am Kartenboden */
#mobileTariffGrid .tariffSetup{
margin-top:auto;
min-height:22px;
}
#mobileTariffGrid .tariffAdd{
margin-top:7px;
}
/* Bestseller bleibt sichtbar */
#mobileTariffGrid .tariffBadge{
top:14px;
right:15px;
left:auto;
z-index:2;
}
/* gemeinsame Vorteile */
.mobileBenefits{
max-width:1000px;
margin:24px auto 0;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
}
.mobileBenefit{
padding:15px 14px;
border-radius:17px;
border:1px solid rgba(70,148,187,.15);
background:linear-gradient(145deg,#ffffff,#f4fbfe);
box-shadow:0 9px 25px rgba(62,125,155,.07);
text-align:center;
}
.mobileBenefit strong{
display:block;
color:#173b55;
font-size:13px;
margin-bottom:4px;
}
.mobileBenefit span{
display:block;
color:#6d8798;
font-size:11.5px;
line-height:1.35;
}
/* Fair-Use bewusst dezent */
.mobileTariffDetails{
max-width:900px;
margin:18px auto 0;
padding:15px 18px;
border-radius:16px;
background:rgba(239,249,253,.72);
border:1px solid rgba(70,148,187,.12);
text-align:left;
}
.mobileTariffDetails strong{
color:#315d75;
font-size:12px;
}
.mobileTariffDetails p{
margin:5px 0 0;
color:#78909f;
font-size:11.5px;
line-height:1.55;
}
@media(max-width:900px){
.mobileBenefits{
grid-template-columns:repeat(2,minmax(0,1fr));
}
#mobileTariffGrid .tariffCard{
min-height:410px;
}
}
@media(max-width:600px){
.mobileBenefits{
grid-template-columns:1fr;
}
#mobileTariffGrid .tariffCard{
min-height:0;
}
#mobileTariffGrid .tariffDesc,
#mobileTariffGrid .tariffFeatures,
#mobileTariffGrid .tariffVatNote{
min-height:0;
}
}
/* MOBILE_TARIFF_V2_END */
/* MOBILE_LOWER_V4_START */
/* ==========================================================
MOBILE LOWER PAGE
========================================================== */
.mobileSectionIntro{
max-width:760px;
margin-left:auto;
margin-right:auto;
margin-bottom:38px;
}
.mobileSectionIntro > p:last-child{
max-width:650px;
margin-left:auto;
margin-right:auto;
color:#6d8798;
}
/* ==========================================================
VALUE CARDS
========================================================== */
.mobileValueSection{
position:relative;
overflow:hidden;
}
.mobileValueGrid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:17px;
}
.mobileValueCard{
position:relative;
min-height:235px;
padding:24px 22px;
border-radius:24px;
overflow:hidden;
border:1px solid rgba(71,151,190,.16);
background:
radial-gradient(circle at 100% 0%,
rgba(124,211,245,.18),
transparent 46%),
linear-gradient(145deg,#fff,#f8fdff);
box-shadow:0 18px 45px rgba(45,112,148,.09);
transition:
transform .3s ease,
box-shadow .3s ease,
border-color .3s ease;
}
.mobileValueCard:hover{
transform:translateY(-6px);
border-color:rgba(67,184,229,.34);
box-shadow:0 25px 55px rgba(45,112,148,.15);
}
.mobileValueIcon{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:24px;
border-radius:15px;
font-size:23px;
font-weight:900;
color:#fff;
box-shadow:0 12px 25px rgba(54,163,210,.24);
}
.mobileValueData .mobileValueIcon{
background:linear-gradient(135deg,#47d7cf,#42b9df);
}
.mobileValueRoaming .mobileValueIcon{
background:linear-gradient(135deg,#54c7ed,#678ce9);
}
.mobileValueNumber .mobileValueIcon{
background:linear-gradient(135deg,#55b9e8,#867bea);
}
.mobileValueActivation .mobileValueIcon{
background:linear-gradient(135deg,#48c7aa,#5bcadf);
}
.mobileValueCard > span{
display:block;
margin-bottom:5px;
color:#42aedb;
font-size:10px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.mobileValueCard > strong{
display:block;
color:#173b55;
font-size:18px;
line-height:1.25;
}
.mobileValueCard > p{
margin:10px 0 0;
color:#718a9a;
font-size:13px;
line-height:1.6;
}
/* ==========================================================
JOURNEY
========================================================== */
.mobileJourneySection{
position:relative;
overflow:hidden;
}
.mobileJourney{
max-width:1050px;
margin:0 auto;
display:grid;
grid-template-columns:1fr 70px 1fr 70px 1fr;
align-items:center;
}
.mobileJourneyStep{
height:100%;
padding:26px;
border-radius:24px;
background:rgba(255,255,255,.82);
border:1px solid rgba(70,148,187,.16);
box-shadow:0 16px 42px rgba(60,121,151,.08);
}
.mobileJourneyNumber{
margin-bottom:28px;
font-size:34px;
font-weight:900;
line-height:1;
letter-spacing:-.05em;
background:linear-gradient(135deg,#45bdeb,#8b78ee);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.mobileJourneyContent > span{
color:#43add9;
font-size:10px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.mobileJourneyContent h3{
margin:6px 0 9px;
color:#173b55;
font-size:19px;
}
.mobileJourneyContent p{
margin:0;
color:#718a9a;
font-size:13px;
line-height:1.6;
}
.mobileJourneyConnector{
display:flex;
justify-content:center;
align-items:center;
}
.mobileJourneyConnector span{
position:relative;
display:block;
width:44px;
height:2px;
background:linear-gradient(90deg,#74d4ed,#9a8df0);
}
.mobileJourneyConnector span::after{
content:"";
position:absolute;
right:-1px;
top:-3px;
width:8px;
height:8px;
border-top:2px solid #8e91ed;
border-right:2px solid #8e91ed;
transform:rotate(45deg);
}
/* ==========================================================
FAQ
========================================================== */
.mobileFaqSection{
position:relative;
}
.mobileFaqLayout{
max-width:1080px;
margin:0 auto;
display:grid;
grid-template-columns:minmax(250px,.75fr) minmax(0,1.5fr);
gap:55px;
align-items:start;
}
.mobileFaqIntro{
position:sticky;
top:110px;
}
.mobileFaqIntro h2{
margin-top:5px;
}
.mobileFaqIntro > p:not(.k){
color:#718a9a;
line-height:1.65;
}
.mobileFaqHelp{
margin-top:30px;
padding:20px;
border-radius:20px;
background:
linear-gradient(145deg,
rgba(218,246,255,.88),
rgba(246,251,255,.92));
border:1px solid rgba(70,148,187,.14);
}
.mobileFaqHelp span{
display:block;
color:#5caacb;
font-size:10px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.07em;
}
.mobileFaqHelp strong{
display:block;
margin:4px 0 11px;
color:#173b55;
}
.mobileFaqHelp a{
color:#268fbe;
font-weight:800;
font-size:12px;
text-decoration:none;
}
.mobileFaqList{
display:grid;
gap:11px;
}
.mobileFaqItem{
border-radius:18px;
border:1px solid rgba(70,148,187,.15);
background:#fff;
box-shadow:0 10px 30px rgba(60,121,151,.055);
overflow:hidden;
transition:
border-color .25s ease,
box-shadow .25s ease;
}
.mobileFaqItem[open]{
border-color:rgba(62,180,224,.32);
box-shadow:0 16px 40px rgba(60,121,151,.10);
}
.mobileFaqItem summary{
min-height:68px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:18px 20px;
list-style:none;
cursor:pointer;
color:#244f68;
font-weight:800;
}
.mobileFaqItem summary::-webkit-details-marker{
display:none;
}
.mobileFaqItem summary b{
flex:0 0 32px;
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
color:#228fbf;
background:#effaff;
font-size:18px;
line-height:1;
transition:transform .25s ease;
}
.mobileFaqItem[open] summary b{
transform:rotate(45deg);
}
.mobileFaqItem > div{
padding:0 20px 20px;
}
.mobileFaqItem p{
max-width:700px;
margin:0;
padding-top:16px;
border-top:1px solid rgba(70,148,187,.10);
color:#718a9a;
font-size:13px;
line-height:1.7;
}
/* ==========================================================
FINAL CTA
========================================================== */
.mobileFinalSection{
padding-top:45px;
}
.mobileFinalCta{
position:relative;
min-height:330px;
display:grid;
grid-template-columns:1.35fr .65fr;
align-items:center;
overflow:hidden;
padding:48px 52px;
border-radius:30px;
color:#fff;
background:
linear-gradient(125deg,
#174d70 0%,
#277baa 44%,
#4caacb 100%);
box-shadow:0 28px 70px rgba(23,82,112,.22);
}
.mobileFinalGlow{
position:absolute;
border-radius:50%;
filter:blur(2px);
pointer-events:none;
}
.mobileFinalGlowOne{
width:310px;
height:310px;
right:-90px;
top:-160px;
background:rgba(145,225,255,.22);
}
.mobileFinalGlowTwo{
width:250px;
height:250px;
left:31%;
bottom:-190px;
background:rgba(154,126,245,.23);
}
.mobileFinalContent{
position:relative;
z-index:2;
max-width:620px;
}
.mobileFinalContent .k{
color:#9ce9ff;
}
.mobileFinalContent h2{
margin:8px 0 12px;
color:#fff;
font-size:34px;
}
.mobileFinalContent > p:not(.k){
max-width:540px;
color:rgba(255,255,255,.79);
line-height:1.65;
}
.mobileFinalActions{
display:flex;
gap:11px;
flex-wrap:wrap;
margin-top:25px;
}
.mobilePrimaryAction,
.mobileSecondaryAction{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 20px;
border-radius:14px;
text-decoration:none;
font-weight:900;
font-size:13px;
}
.mobilePrimaryAction{
background:#fff;
color:#17506f;
box-shadow:0 12px 26px rgba(3,45,68,.18);
}
.mobileSecondaryAction{
color:#fff;
border:1px solid rgba(255,255,255,.32);
background:rgba(255,255,255,.09);
backdrop-filter:blur(10px);
}
.mobileFinalVisual{
position:relative;
z-index:2;
display:flex;
justify-content:center;
}
.mobileSignalPhone{
width:162px;
height:260px;
padding:9px;
border-radius:31px;
transform:rotate(6deg);
background:rgba(255,255,255,.94);
box-shadow:
0 30px 65px rgba(5,47,70,.30),
inset 0 0 0 1px rgba(255,255,255,.5);
}
.mobileSignalTop{
width:55px;
height:6px;
margin:4px auto 8px;
border-radius:99px;
background:#d7e7ee;
}
.mobileSignalScreen{
height:225px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border-radius:23px;
color:#173b55;
background:
radial-gradient(circle at 75% 20%,
rgba(127,214,246,.44),
transparent 42%),
linear-gradient(160deg,#effbff,#dff3fa);
}
.mobileSignalScreen > span{
color:#54aecd;
font-size:10px;
font-weight:900;
letter-spacing:.12em;
}
.mobileSignalScreen > strong{
margin:7px 0 18px;
color:#165778;
font-size:39px;
letter-spacing:-.05em;
}
.mobileSignalBars{
height:36px;
display:flex;
align-items:flex-end;
gap:5px;
}
.mobileSignalBars i{
display:block;
width:8px;
border-radius:7px;
background:linear-gradient(#42c8ec,#4f82e4);
}
.mobileSignalBars i:nth-child(1){height:11px}
.mobileSignalBars i:nth-child(2){height:18px}
.mobileSignalBars i:nth-child(3){height:26px}
.mobileSignalBars i:nth-child(4){height:35px}
.mobileSignalScreen small{
margin-top:15px;
color:#6c8d9e;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media(max-width:1000px){
.mobileValueGrid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.mobileJourney{
grid-template-columns:1fr;
gap:12px;
}
.mobileJourneyConnector{
display:none;
}
.mobileFaqLayout{
grid-template-columns:1fr;
gap:30px;
}
.mobileFaqIntro{
position:static;
}
}
@media(max-width:700px){
.mobileValueGrid{
grid-template-columns:1fr;
}
.mobileValueCard{
min-height:0;
}
.mobileFinalCta{
grid-template-columns:1fr;
padding:34px 25px;
}
.mobileFinalContent h2{
font-size:27px;
}
.mobileFinalVisual{
margin-top:38px;
}
.mobileSignalPhone{
width:140px;
height:225px;
}
.mobileSignalScreen{
height:191px;
}
.mobileFinalActions{
flex-direction:column;
}
.mobilePrimaryAction,
.mobileSecondaryAction{
width:100%;
}
}
/* MOBILE_LOWER_V4_END */
/* MOBILE_OPTIONS_V5_START */
/* Zusatzoptionen */
.mobileOptionsSection{
position:relative;
overflow:hidden;
background:
linear-gradient(180deg,#f8fdff 0%,#fff 100%);
}
.mobileOptionGroups{
max-width:1080px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:17px;
}
.mobileOptionGroup{
border-radius:24px;
overflow:hidden;
border:1px solid rgba(70,148,187,.15);
background:#fff;
box-shadow:0 16px 42px rgba(45,112,148,.08);
}
.mobileOptionHead{
padding:20px 21px;
background:
linear-gradient(135deg,
rgba(211,244,255,.85),
rgba(241,249,255,.95));
border-bottom:1px solid rgba(70,148,187,.11);
}
.mobileOptionHead span{
display:block;
margin-bottom:4px;
color:#42aeda;
font-size:10px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.mobileOptionHead strong{
color:#173b55;
font-size:18px;
}
.mobileOptionRows{
padding:5px 18px;
}
.mobileOptionRow{
min-height:73px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:13px 3px;
border-bottom:1px solid rgba(70,148,187,.09);
}
.mobileOptionRow:last-child{
border-bottom:0;
}
.mobileOptionRow > div{
min-width:0;
}
.mobileOptionRow > div strong{
display:block;
color:#315a72;
font-size:13px;
}
.mobileOptionRow > div span{
display:block;
margin-top:3px;
color:#8298a6;
font-size:10.5px;
}
.mobileOptionRow > b{
flex:0 0 auto;
color:#164c69;
font-size:15px;
}
.mobileExtraServices{
max-width:1080px;
margin:20px auto 0;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:17px;
}
.mobileExtraService{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:17px;
padding:21px;
border-radius:22px;
background:
linear-gradient(145deg,#fff,#f5fcff);
border:1px solid rgba(70,148,187,.15);
box-shadow:0 14px 38px rgba(45,112,148,.075);
}
.mobileExtraIcon{
width:52px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
border-radius:16px;
background:linear-gradient(135deg,#5bcce9,#728eea);
color:#fff;
font-size:13px;
font-weight:900;
box-shadow:0 10px 22px rgba(77,161,212,.23);
}
.mobileExtraService > div:nth-child(2) > span{
display:block;
color:#4caed2;
font-size:9.5px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.07em;
}
.mobileExtraService > div:nth-child(2) > strong{
display:block;
margin:3px 0 5px;
color:#173b55;
font-size:17px;
}
.mobileExtraService p{
margin:0;
color:#718a9a;
font-size:11.5px;
line-height:1.5;
}
.mobileExtraPrice{
text-align:right;
}
.mobileExtraPrice strong{
display:block;
color:#174d6c;
font-size:21px;
white-space:nowrap;
}
.mobileExtraPrice span{
display:block;
color:#839aa8;
font-size:10px;
}
.mobileOptionNote{
max-width:900px;
margin:19px auto 0;
text-align:center;
color:#879ba8;
font-size:10.5px;
line-height:1.6;
}
/* Voice Minutentarife */
.voiceMinuteSection{
background:
linear-gradient(180deg,#fff,#f7fcff);
}
.voiceMinuteGrid{
max-width:850px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:17px;
}
.voiceMinuteCard{
padding:27px 24px;
border-radius:24px;
text-align:center;
border:1px solid rgba(70,148,187,.15);
background:
radial-gradient(circle at 100% 0%,
rgba(105,207,244,.17),
transparent 45%),
#fff;
box-shadow:0 16px 40px rgba(45,112,148,.08);
}
.voiceMinuteCard > span{
display:block;
color:#45add5;
font-size:10px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.voiceMinuteCard > strong{
display:block;
margin:10px 0 1px;
color:#173b55;
font-size:29px;
}
.voiceMinuteCard > small{
color:#8197a5;
}
.voiceMinuteCard p{
margin:13px 0 0;
color:#718a9a;
font-size:12px;
}
.voiceMinuteNote{
max-width:760px;
margin:18px auto 0;
color:#8297a5;
text-align:center;
font-size:11px;
line-height:1.6;
}
@media(max-width:900px){
.mobileOptionGroups{
grid-template-columns:1fr;
}
.mobileExtraServices{
grid-template-columns:1fr;
}
.voiceMinuteGrid{
grid-template-columns:1fr;
}
}
@media(max-width:600px){
.mobileExtraService{
grid-template-columns:auto 1fr;
}
.mobileExtraPrice{
grid-column:1 / -1;
text-align:left;
padding-left:69px;
}
}
/* MOBILE_OPTIONS_V5_END */
/* MOBILE_CLEAN_V6_START */
/* Drei gemeinsame Vorteile statt vier */
.mobileBenefits{
grid-template-columns:repeat(3,minmax(0,1fr));
max-width:900px;
}
/* Fair-Use-Bereich etwas kompakter */
.mobileTariffDetails{
max-width:850px;
margin-top:20px;
padding:17px 20px;
background:
linear-gradient(
135deg,
rgba(237,249,254,.84),
rgba(248,252,255,.95)
);
}
.mobileTariffDetails strong{
display:block;
margin-bottom:4px;
font-size:13px;
}
.mobileTariffDetails p{
margin-top:4px;
}
/* Nicht mehr benötigte alte Aktivierungsbox */
.activationNote{
display:none !important;
}
@media(max-width:900px){
.mobileBenefits{
grid-template-columns:1fr;
max-width:650px;
}
}
/* MOBILE_CLEAN_V6_END */
/* MOBILE_ROAMING_ZONES_V7_START */
.mobileRoamingSection{
position:relative;
background:
linear-gradient(180deg,#f8fcff 0%,#ffffff 100%);
}
.mobileZoneList{
max-width:1050px;
margin:0 auto;
display:grid;
gap:13px;
}
.mobileZoneItem{
overflow:hidden;
border-radius:20px;
border:1px solid rgba(70,148,187,.15);
background:#fff;
box-shadow:
0 11px 32px rgba(48,108,138,.06);
transition:
border-color .25s ease,
box-shadow .25s ease,
transform .25s ease;
}
.mobileZoneItem:hover{
transform:translateY(-2px);
border-color:rgba(66,177,220,.27);
box-shadow:
0 17px 40px rgba(48,108,138,.09);
}
.mobileZoneItem[open]{
border-color:rgba(67,181,225,.32);
box-shadow:
0 20px 46px rgba(48,108,138,.11);
}
.mobileZoneItem summary{
position:relative;
min-height:88px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:20px 22px;
cursor:pointer;
list-style:none;
}
.mobileZoneItem summary::-webkit-details-marker{
display:none;
}
.mobileZoneItem summary > div{
min-width:0;
}
.mobileZoneItem summary span{
display:inline-flex;
margin-bottom:4px;
padding:4px 9px;
border-radius:999px;
background:#eaf8ff;
color:#279ac9;
font-size:9px;
font-weight:900;
letter-spacing:.07em;
text-transform:uppercase;
}
.mobileZoneItem summary strong{
display:block;
color:#173b55;
font-size:18px;
}
.mobileZoneItem summary small{
display:block;
margin-top:4px;
color:#8297a5;
font-size:11px;
}
.mobileZoneItem summary > b{
flex:0 0 37px;
width:37px;
height:37px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
color:#fff;
background:
linear-gradient(135deg,#50c7ec,#568ee9);
box-shadow:
0 9px 18px rgba(72,163,213,.25);
font-size:20px;
line-height:1;
transition:
transform .25s ease,
background .25s ease;
}
.mobileZoneItem[open] summary > b{
transform:rotate(45deg);
}
.mobileZoneBody{
padding:0 22px 22px;
}
.mobileZoneBody p{
margin:0;
padding:18px 19px;
border-radius:15px;
background:
linear-gradient(
145deg,
rgba(241,250,254,.92),
rgba(250,253,255,.98)
);
border:1px solid rgba(70,148,187,.08);
color:#587387;
font-size:12.5px;
line-height:1.85;
}
/* leichte Farbcodierung je Zone */
.mobileZoneItem.zone1 summary span{
background:#e5fbf8;
color:#269f91;
}
.mobileZoneItem.zone1 summary > b{
background:
linear-gradient(135deg,#43cab7,#48b9df);
}
.mobileZoneItem.zone2 summary span{
background:#eaf8ff;
color:#238fc4;
}
.mobileZoneItem.zone3 summary span{
background:#eef2ff;
color:#6474d8;
}
.mobileZoneItem.zone3 summary > b{
background:
linear-gradient(135deg,#61a8e8,#777ee7);
}
.mobileZoneItem.zone4 summary span{
background:#f3efff;
color:#8365cf;
}
.mobileZoneItem.zone4 summary > b{
background:
linear-gradient(135deg,#758be8,#986fdc);
}
.mobileZoneItem.zone5 summary span{
background:#fff3e8;
color:#c4803b;
}
.mobileZoneItem.zone5 summary > b{
background:
linear-gradient(135deg,#efa857,#d98855);
}
.mobileZoneItem.zone6 summary span{
background:#fff0f3;
color:#c45c73;
}
.mobileZoneItem.zone6 summary > b{
background:
linear-gradient(135deg,#e8879d,#cb6a88);
}
.mobileZoneHint{
max-width:900px;
margin:18px auto 0;
padding:15px 18px;
border-radius:15px;
text-align:center;
background:#f7fbfd;
border:1px solid rgba(70,148,187,.10);
}
.mobileZoneHint strong{
color:#365f76;
font-size:11px;
}
.mobileZoneHint p{
margin:4px 0 0;
color:#8297a5;
font-size:10.5px;
line-height:1.55;
}
@media(max-width:600px){
.mobileZoneItem summary{
min-height:78px;
padding:17px;
}
.mobileZoneItem summary strong{
font-size:16px;
}
.mobileZoneItem summary small{
display:none;
}
.mobileZoneBody{
padding:0 15px 15px;
}
.mobileZoneBody p{
padding:15px;
font-size:11.5px;
line-height:1.75;
}
}
/* MOBILE_ROAMING_ZONES_V7_END */
/* MOBILE_BENEFITS_V8_START */
/* ==========================================================
MOBILE BENEFITS
========================================================== */
.mobileBenefits{
max-width:1040px;
margin:28px auto 0;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
.mobileBenefit{
position:relative;
min-height:112px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:20px 18px;
border-radius:22px;
overflow:hidden;
text-align:center;
background:
radial-gradient(
circle at 50% -40%,
rgba(105,211,244,.20),
transparent 55%
),
linear-gradient(145deg,#ffffff,#f7fcff);
border:1px solid rgba(70,148,187,.14);
box-shadow:
0 13px 34px rgba(49,109,140,.07);
transition:
transform .28s ease,
border-color .28s ease,
box-shadow .28s ease;
}
.mobileBenefit::before{
content:"";
position:absolute;
top:0;
left:22%;
right:22%;
height:3px;
border-radius:0 0 8px 8px;
background:
linear-gradient(
90deg,
#55cce9,
#708ee9
);
opacity:.75;
}
.mobileBenefit:hover{
transform:translateY(-4px);
border-color:
rgba(72,181,223,.28);
box-shadow:
0 20px 45px rgba(49,109,140,.11);
}
.mobileBenefit strong{
display:block;
margin:0 0 6px;
color:#173b55;
font-size:16px;
line-height:1.25;
}
.mobileBenefit span{
display:block;
color:#718a9a;
font-size:12.5px;
line-height:1.4;
}
/* ==========================================================
FAIR USE
========================================================== */
.mobileTariffDetails{
position:relative;
max-width:1040px;
margin:22px auto 0;
padding:19px 22px 19px 62px;
border-radius:20px;
background:
linear-gradient(
135deg,
rgba(230,248,255,.88),
rgba(248,252,255,.96)
);
border:
1px solid rgba(70,148,187,.13);
box-shadow:
0 10px 28px rgba(49,109,140,.045);
}
.mobileTariffDetails::before{
content:"i";
position:absolute;
left:20px;
top:50%;
transform:translateY(-50%);
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:
linear-gradient(
135deg,
#54c8ea,
#658de7
);
color:#fff;
font-weight:900;
font-size:13px;
box-shadow:
0 8px 17px rgba(66,157,208,.22);
}
.mobileTariffDetails strong{
display:block;
margin-bottom:5px;
color:#315e76;
font-size:13px;
}
.mobileTariffDetails p{
margin:0;
color:#718a9a;
font-size:12px;
line-height:1.65;
}
/* ==========================================================
KOMBI TEASER
========================================================== */
.comboTeaser{
max-width:1040px;
margin:24px auto 0;
padding:28px 30px;
border-radius:24px;
background:
radial-gradient(
circle at 100% 0,
rgba(104,211,244,.22),
transparent 44%
),
linear-gradient(
135deg,
rgba(210,244,255,.90),
rgba(242,250,255,.97)
);
border:
1px solid rgba(70,148,187,.16);
box-shadow:
0 14px 38px rgba(49,109,140,.07);
}
.comboTeaser .k{
color:#25a3cf;
}
.comboTeaser strong{
font-size:20px;
}
.comboTeaser .ghost{
min-height:46px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0 20px;
border-radius:14px;
background:
rgba(255,255,255,.82);
border:
1px solid rgba(65,155,200,.20);
box-shadow:
0 9px 20px rgba(49,109,140,.06);
}
/* alte Aktivierungsbox sicher weg */
.activationNote{
display:none !important;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media(max-width:800px){
.mobileBenefits{
grid-template-columns:1fr;
}
.mobileBenefit{
min-height:95px;
}
.mobileTariffDetails{
padding:
18px 18px 18px 56px;
}
.comboTeaser{
padding:22px;
}
}
/* MOBILE_BENEFITS_V8_END */
/* MOBILE_JOURNEY_GLOW_V2_START */
.mobileJourneyStep{
position:relative;
overflow:hidden;
isolation:isolate;
animation:mobileJourneyCardGlow 7.2s ease-in-out infinite;
}
.mobileJourneyStep::after{
content:"";
position:absolute;
z-index:-1;
inset:0;
border-radius:inherit;
opacity:0;
pointer-events:none;
background:
radial-gradient(
circle at 30% 20%,
rgba(100,215,255,.25),
transparent 55%
);
animation:mobileJourneyInnerGlow 7.2s ease-in-out infinite;
}
.mobileJourneyStep:nth-of-type(1),
.mobileJourneyStep:nth-of-type(1)::after{
animation-delay:0s;
}
.mobileJourneyStep:nth-of-type(2),
.mobileJourneyStep:nth-of-type(2)::after{
animation-delay:1.5s;
}
.mobileJourneyStep:nth-of-type(3),
.mobileJourneyStep:nth-of-type(3)::after{
animation-delay:3s;
}
@keyframes mobileJourneyCardGlow{
0%,15%,100%{
transform:translateY(0);
border-color:rgba(70,148,187,.16);
box-shadow:0 16px 42px rgba(60,121,151,.08);
}
5%,10%{
transform:translateY(-5px);
border-color:rgba(75,190,235,.50);
box-shadow:
0 23px 50px rgba(56,145,190,.18),
0 0 0 1px rgba(92,207,247,.17) inset,
0 0 30px rgba(87,198,240,.12);
}
}
@keyframes mobileJourneyInnerGlow{
0%,15%,100%{
opacity:0;
}
5%,10%{
opacity:1;
}
}
@media(prefers-reduced-motion:reduce){
.mobileJourneyStep,
.mobileJourneyStep::after{
animation:none !important;
}
}
/* MOBILE_JOURNEY_GLOW_V2_END */
/* MOBILE_HERO_POSITION_V3_START */
/* ========================================================
HERO-GRID
Wichtig: .pageHero.mobileHero > .shell ist absichtlich
spezifischer als das bestehende globale Hero-CSS.
======================================================== */
.pageHero.mobileHero > .shell.mobileHeroShell{
position:relative;
display:grid !important;
grid-template-columns:
minmax(0,1.05fr)
minmax(440px,.95fr) !important;
gap:64px;
align-items:center;
min-height:680px;
}
/* ========================================================
LINKER TEXT
======================================================== */
.pageHero.mobileHero .mobileHeroIntro{
position:relative;
z-index:3;
max-width:690px;
}
.pageHero.mobileHero .mobileHeroIntro h1{
margin-top:14px;
}
.mobileHeroGradient{
background:
linear-gradient(
90deg,
#517edc,
#866ef0
);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
/* ========================================================
GLOBALES ALTES HERO-VISUAL AUSBLENDEN
Dein grosses leeres Rechteck stammt aus dem vorhandenen
Hero-System. Wir zeichnen es jetzt selbst als echtes
HTML-Element, damit Inhalt DARIN liegen kann.
======================================================== */
.pageHero.mobileHero::before,
.pageHero.mobileHero::after{
pointer-events:none;
}
/* ========================================================
RECHTES VISUAL
======================================================== */
.pageHero.mobileHero .mobileHeroVisual{
position:relative;
z-index:3;
width:100%;
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
border-radius:32px;
overflow:hidden;
background:
linear-gradient(
145deg,
rgba(255,255,255,.69),
rgba(242,249,253,.82)
);
border:
1px solid rgba(214,232,241,.92);
box-shadow:
0 28px 65px rgba(72,125,151,.09),
inset 0 1px 0 rgba(255,255,255,.96);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
}
.mobileHeroVisualBackground{
position:absolute;
inset:0;
background:
radial-gradient(
circle at 13% 20%,
rgba(255,190,113,.22),
transparent 33%
),
radial-gradient(
circle at 55% 8%,
rgba(143,130,249,.17),
transparent 32%
),
radial-gradient(
circle at 88% 18%,
rgba(76,191,242,.25),
transparent 34%
),
radial-gradient(
circle at 60% 92%,
rgba(112,207,144,.17),
transparent 31%
),
radial-gradient(
circle at 89% 87%,
rgba(255,215,100,.13),
transparent 28%
);
}
/* ========================================================
INHALT IM RECHTEN FELD
======================================================== */
.mobileHeroVisualInner{
position:relative;
width:100%;
height:100%;
min-height:420px;
padding:34px;
z-index:2;
}
.mobileHeroVisualLabel{
position:relative;
z-index:5;
color:#5c93b5;
font-size:12px;
font-weight:900;
letter-spacing:.14em;
text-transform:uppercase;
}
/* ========================================================
SLIDES
======================================================== */
.mobileHeroSlide{
position:absolute;
left:34px;
right:34px;
top:84px;
opacity:0;
visibility:hidden;
transform:
translateY(12px)
scale(.98);
transition:
opacity .45s ease,
visibility .45s ease,
transform .45s ease;
}
.mobileHeroSlide.is-active{
opacity:1;
visibility:visible;
transform:
translateY(0)
scale(1);
}
.mobileHeroSlideIcon{
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
border-radius:17px;
color:#183e59;
font-size:20px;
font-weight:900;
background:
rgba(255,255,255,.68);
border:
1px solid rgba(202,224,235,.90);
box-shadow:
0 10px 25px rgba(75,126,153,.08);
}
.mobileHeroSlide h3{
margin:0;
color:#173b55;
font-size:27px;
line-height:1.17;
}
.mobileHeroSlide p{
max-width:440px;
margin:10px 0 25px;
color:#6e899a;
font-size:16px;
line-height:1.55;
}
/* ========================================================
FARBIIGE CHIPS WIE MICROSOFT
======================================================== */
.mobileHeroSlideTags{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.mobileHeroSlideTags span{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:0 16px;
border-radius:999px;
color:#fff;
font-size:12px;
font-weight:900;
box-shadow:
0 8px 20px rgba(68,118,148,.08);
}
.mobileHeroSlideTags span:nth-child(1){
background:
linear-gradient(135deg,#ffad52,#ff8348);
}
.mobileHeroSlideTags span:nth-child(2){
background:
linear-gradient(135deg,#4caeff,#398cf5);
}
.mobileHeroSlideTags span:nth-child(3){
background:
linear-gradient(135deg,#966cff,#7e5bf0);
}
.mobileHeroSlideTags span:nth-child(4){
background:
linear-gradient(135deg,#52d29a,#3cc083);
}
/* ========================================================
DOTS
======================================================== */
.mobileHeroSlideDots{
position:absolute;
left:34px;
bottom:28px;
display:flex;
gap:8px;
z-index:5;
}
.mobileHeroSlideDots span{
width:8px;
height:8px;
border-radius:999px;
background:
rgba(87,145,178,.22);
transition:
width .3s ease,
background .3s ease;
}
.mobileHeroSlideDots span.is-active{
width:26px;
background:
linear-gradient(
90deg,
#4cc8e9,
#777dea
);
}
/* ========================================================
RESPONSIVE
======================================================== */
@media(max-width:1050px){
.pageHero.mobileHero > .shell.mobileHeroShell{
grid-template-columns:1fr !important;
gap:40px;
min-height:auto;
}
.pageHero.mobileHero .mobileHeroVisual{
min-height:390px;
}
.mobileHeroVisualInner{
min-height:390px;
}
}
@media(max-width:650px){
.pageHero.mobileHero .mobileHeroVisual{
min-height:350px;
border-radius:24px;
}
.mobileHeroVisualInner{
min-height:350px;
padding:22px;
}
.mobileHeroSlide{
left:22px;
right:22px;
top:70px;
}
.mobileHeroSlide h3{
font-size:22px;
}
.mobileHeroSlide p{
font-size:14px;
}
.mobileHeroSlideDots{
left:22px;
bottom:20px;
}
}
/* MOBILE_HERO_POSITION_V3_END */
/* MOBILE_HERO_VERIFIED_FIX_V5_START */
/* ==========================================================
1. DAS BESTEHENDE RECHTE PSEUDO-ELEMENT ABSCHALTEN
Dieses ::after war das leere Viereck rechts und hat
gleichzeitig Grid-Spalte 2 belegt.
========================================================== */
body.servicePage.themeConnect
.pageHero.mobileHero
.shell.mobileHeroShell::after{
content:none !important;
display:none !important;
}
/* ==========================================================
2. HERO-GRID EXPLIZIT DEFINIEREN
========================================================== */
body.servicePage.themeConnect
.pageHero.mobileHero
.shell.mobileHeroShell{
display:grid !important;
grid-template-columns:
minmax(0,1fr)
minmax(330px,43%) !important;
gap:54px !important;
align-items:center !important;
}
/* ==========================================================
3. LINKER BLOCK FEST AUF SPALTE 1
========================================================== */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroIntro{
grid-column:1 !important;
grid-row:1 !important;
align-self:center !important;
width:100% !important;
max-width:760px !important;
margin:0 !important;
}
/* ==========================================================
4. MOBILE VISUAL EXAKT DORTHIN,
WO VORHER DAS ::after WAR
========================================================== */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroVisual{
grid-column:2 !important;
grid-row:1 !important;
align-self:stretch !important;
justify-self:stretch !important;
position:relative !important;
width:100% !important;
min-height:330px !important;
margin:0 !important;
overflow:hidden !important;
border-radius:30px !important;
background:
linear-gradient(
145deg,
rgba(255,255,255,.84),
rgba(239,248,253,.78)
) !important;
border:
1px solid rgba(255,255,255,.94) !important;
box-shadow:
0 26px 70px rgba(40,111,145,.13),
inset 0 1px 0 rgba(255,255,255,.90) !important;
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
}
/* ==========================================================
5. HINTERGRUND NUR IN SU-IT FARBEN
========================================================== */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroVisualBackground{
position:absolute !important;
inset:0 !important;
background:
radial-gradient(
circle at 82% 18%,
rgba(92,202,242,.23),
transparent 37%
),
radial-gradient(
circle at 55% 12%,
rgba(107,139,236,.12),
transparent 35%
),
radial-gradient(
circle at 18% 78%,
rgba(126,118,235,.07),
transparent 36%
),
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(226,245,252,.16)
) !important;
pointer-events:none !important;
}
/* ==========================================================
6. INHALT IM FELD
========================================================== */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroVisualInner{
position:relative !important;
z-index:2 !important;
width:100% !important;
height:100% !important;
min-height:330px !important;
padding:28px 30px !important;
}
/* ==========================================================
7. ICON
========================================================== */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideIcon{
background:
linear-gradient(
145deg,
rgba(247,253,255,.98),
rgba(226,244,251,.96)
) !important;
color:#2489b7 !important;
border:
1px solid rgba(105,190,225,.26) !important;
box-shadow:
0 10px 24px rgba(55,127,160,.08) !important;
}
/* ==========================================================
8. CHIPS – KEIN ORANGE / GRÜN MEHR
========================================================== */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags span{
color:#245a78 !important;
border:
1px solid rgba(99,177,213,.20) !important;
box-shadow:
0 8px 18px rgba(58,120,150,.055) !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags span:nth-child(1){
background:
linear-gradient(
135deg,
#daf5ff,
#d0edf8
) !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags span:nth-child(2){
background:
linear-gradient(
135deg,
#dfeeff,
#d7e6fa
) !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags span:nth-child(3){
background:
linear-gradient(
135deg,
#e8e7ff,
#dedcf8
) !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags span:nth-child(4){
background:
linear-gradient(
135deg,
#e3f4fb,
#d9edf6
) !important;
}
/* ==========================================================
9. TITEL / TEXT
========================================================== */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlide h3{
color:#173b55 !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlide p{
color:#6c8798 !important;
}
/* ==========================================================
10. DOTS
========================================================== */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideDots span.is-active{
background:
linear-gradient(
90deg,
#4cc3e5,
#6c82e8
) !important;
}
/* ==========================================================
TABLET
========================================================== */
@media(max-width:980px){
body.servicePage.themeConnect
.pageHero.mobileHero
.shell.mobileHeroShell{
grid-template-columns:1fr !important;
gap:28px !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroIntro{
grid-column:1 !important;
grid-row:1 !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroVisual{
grid-column:1 !important;
grid-row:2 !important;
min-height:330px !important;
}
}
/* MOBILE_HERO_VERIFIED_FIX_V5_END */
/* MOBILE_HERO_VISUAL_REFINEMENT_V6_START */
/* kleinere rechte Karte */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroVisual{
max-width:500px !important;
width:100% !important;
min-height:390px !important;
justify-self:end !important;
align-self:center !important;
border-radius:30px !important;
background:
linear-gradient(
145deg,
rgba(255,255,255,.53),
rgba(239,249,254,.35)
) !important;
border:
1px solid rgba(255,255,255,.78) !important;
box-shadow:
0 24px 60px rgba(65,130,166,.13),
0 0 40px rgba(96,199,237,.08),
inset 0 1px 0 rgba(255,255,255,.96),
inset 0 -1px 0 rgba(255,255,255,.30) !important;
backdrop-filter:
blur(28px)
saturate(145%) !important;
-webkit-backdrop-filter:
blur(28px)
saturate(145%) !important;
}
/* weicher Glow im Glas */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroVisualBackground{
background:
radial-gradient(
circle at 82% 18%,
rgba(84,203,244,.30),
transparent 35%
),
radial-gradient(
circle at 51% 10%,
rgba(105,140,238,.14),
transparent 32%
),
radial-gradient(
circle at 18% 83%,
rgba(131,116,241,.11),
transparent 34%
),
radial-gradient(
circle at 50% 50%,
rgba(255,255,255,.30),
transparent 58%
) !important;
}
/* Höhe innen passend verkleinern */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroVisualInner{
min-height:390px !important;
padding:27px 29px !important;
}
/* Slides etwas kompakter */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlide{
top:76px !important;
left:29px !important;
right:29px !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlide h3{
font-size:25px !important;
line-height:1.18 !important;
margin-bottom:8px !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlide p{
font-size:14px !important;
line-height:1.55 !important;
max-width:390px !important;
margin:0 0 21px !important;
}
/* ========================================================
FARBIGE ICONS – nur SU-IT Blau/Violett-Familie
======================================================== */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideIcon{
width:58px !important;
height:58px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:18px !important;
color:#fff !important;
font-size:17px !important;
font-weight:900 !important;
border:
1px solid rgba(255,255,255,.60) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 11px 24px rgba(60,130,170,.17) !important;
text-shadow:
0 1px 2px rgba(29,76,107,.14);
}
/* Mobile Tarife */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlide:nth-of-type(1)
.mobileHeroSlideIcon{
background:
linear-gradient(
135deg,
#49c4e8,
#438fe8
) !important;
}
/* Rufnummer */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlide:nth-of-type(2)
.mobileHeroSlideIcon{
background:
linear-gradient(
135deg,
#539de9,
#657fe9
) !important;
}
/* Roaming */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlide:nth-of-type(3)
.mobileHeroSlideIcon{
background:
linear-gradient(
135deg,
#638eea,
#7d76e9
) !important;
}
/* Support */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlide:nth-of-type(4)
.mobileHeroSlideIcon{
background:
linear-gradient(
135deg,
#45bddc,
#667fe4
) !important;
}
/* Chips ruhiger */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags{
gap:8px !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags span{
min-height:36px !important;
padding:0 14px !important;
font-size:11px !important;
font-weight:800 !important;
color:#315f7b !important;
border:
1px solid rgba(119,188,218,.23) !important;
box-shadow:
0 6px 15px rgba(65,125,155,.045) !important;
}
/* nur dezente Website-Farben */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags span:nth-child(1){
background:#dff6fd !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags span:nth-child(2){
background:#e2effd !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags span:nth-child(3){
background:#e9e8fc !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags span:nth-child(4){
background:#e3f3f8 !important;
}
/* Dots etwas dezenter */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideDots{
left:29px !important;
bottom:23px !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideDots span{
width:7px !important;
height:7px !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideDots span.is-active{
width:25px !important;
background:
linear-gradient(
90deg,
#45c2e5,
#697ee9
) !important;
box-shadow:
0 0 13px rgba(77,170,226,.30) !important;
}
/* Mobile */
@media(max-width:980px){
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroVisual{
max-width:100% !important;
min-height:365px !important;
justify-self:stretch !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroVisualInner{
min-height:365px !important;
}
}
/* MOBILE_HERO_VISUAL_REFINEMENT_V6_END */
/* MOBILE_FINAL_POLISH_V7_START */
/* ==========================================================
HERO ICON – GLAS + ZWEI LEUCHTENDE BLAUTÖNE
========================================================== */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideIcon{
position:relative !important;
overflow:hidden !important;
color:#ffffff !important;
background:
linear-gradient(
135deg,
rgba(74,205,240,.88),
rgba(72,127,232,.84)
) !important;
border:
1px solid rgba(255,255,255,.62) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.72),
inset 0 -8px 18px rgba(55,103,205,.10),
0 12px 28px rgba(63,148,215,.19),
0 0 25px rgba(81,191,237,.17) !important;
backdrop-filter:
blur(14px)
saturate(145%) !important;
-webkit-backdrop-filter:
blur(14px)
saturate(145%) !important;
}
/* kleine Lichtreflexion */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideIcon::before{
content:"";
position:absolute;
width:42px;
height:24px;
left:5px;
top:4px;
border-radius:999px;
background:
linear-gradient(
135deg,
rgba(255,255,255,.62),
rgba(255,255,255,0)
);
filter:blur(1px);
transform:rotate(-18deg);
pointer-events:none;
}
/* zweiter Glow unten rechts */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideIcon::after{
content:"";
position:absolute;
width:32px;
height:32px;
right:-8px;
bottom:-10px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(92,122,245,.46),
rgba(92,122,245,0) 70%
);
pointer-events:none;
}
/* Text / Symbol immer über Glow */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideIcon > *{
position:relative;
z-index:2;
}
/* ==========================================================
AGB / TARIFBEDINGUNGEN ACCORDION
========================================================== */
.mobileLegalSection{
padding-top:38px !important;
padding-bottom:26px !important;
background:
linear-gradient(
180deg,
rgba(250,253,255,0),
rgba(246,251,254,.55)
);
}
.mobileLegalAccordion{
max-width:1040px;
margin:0 auto;
overflow:hidden;
border-radius:21px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.78),
rgba(244,250,253,.72)
);
border:
1px solid rgba(142,199,225,.18);
box-shadow:
0 13px 34px rgba(53,112,143,.06),
inset 0 1px 0 rgba(255,255,255,.90);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
}
.mobileLegalAccordion summary{
min-height:78px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:17px 20px;
cursor:pointer;
list-style:none;
}
.mobileLegalAccordion summary::-webkit-details-marker{
display:none;
}
.mobileLegalSummary{
display:flex;
align-items:center;
gap:15px;
}
.mobileLegalSummary > span{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:76px;
min-height:30px;
padding:0 11px;
border-radius:999px;
color:#338bb3;
font-size:9px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
background:
linear-gradient(
135deg,
#e5f8ff,
#e3effc
);
border:
1px solid rgba(105,188,224,.20);
}
.mobileLegalSummary strong{
display:block;
color:#173b55;
font-size:14px;
}
.mobileLegalSummary small{
display:block;
margin-top:3px;
color:#8297a5;
font-size:10.5px;
}
.mobileLegalAccordion summary > b{
flex:0 0 35px;
width:35px;
height:35px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
color:#ffffff;
font-size:18px;
font-weight:500;
background:
linear-gradient(
135deg,
#50c6e7,
#5c84e7
);
box-shadow:
0 8px 18px rgba(64,149,205,.17);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.mobileLegalAccordion[open] summary > b{
transform:rotate(45deg);
box-shadow:
0 11px 24px rgba(64,149,205,.22);
}
.mobileLegalContent{
margin:0 20px 19px;
padding:17px 19px;
border-radius:16px;
background:
linear-gradient(
145deg,
rgba(240,250,255,.74),
rgba(251,253,255,.90)
);
border:
1px solid rgba(125,190,218,.10);
}
.mobileLegalContent p{
margin:0;
max-width:800px;
color:#657f91;
font-size:11.5px;
line-height:1.65;
}
.mobileLegalContent a{
display:inline-flex;
align-items:center;
margin-top:12px;
min-height:36px;
padding:0 14px;
border-radius:11px;
color:#267ea7;
font-size:10.5px;
font-weight:900;
background:
rgba(230,247,254,.85);
border:
1px solid rgba(102,183,219,.17);
transition:
transform .2s ease,
background .2s ease;
}
.mobileLegalContent a:hover{
transform:translateY(-1px);
background:#e3f6fd;
}
/* Mobile */
@media(max-width:650px){
.mobileLegalSummary{
align-items:flex-start;
}
.mobileLegalSummary > span{
display:none;
}
.mobileLegalAccordion summary{
padding:15px 16px;
}
.mobileLegalContent{
margin:0 15px 15px;
padding:15px;
}
}
/* MOBILE_FINAL_POLISH_V7_END */
/* MOBILE_LEGAL_BOTTOM_V8_START */
.mobileLegalSection{
padding-top:26px !important;
padding-bottom:72px !important;
}
.mobileLegalAccordion{
max-width:1040px;
margin:0 auto;
}
.mobileLegalGrid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.mobileLegalGrid article{
padding:17px 18px;
border-radius:15px;
background:linear-gradient(
145deg,
rgba(244,251,255,.88),
rgba(252,254,255,.96)
);
border:1px solid rgba(118,188,219,.10);
}
.mobileLegalGrid article strong{
display:block;
margin-bottom:6px;
color:#234d67;
font-size:12px;
}
.mobileLegalGrid article p{
margin:0;
color:#71899a;
font-size:11px;
line-height:1.65;
}
.mobileLegalFootnote{
margin-top:14px;
padding:14px 16px;
border-radius:14px;
background:rgba(234,247,253,.62);
border:1px solid rgba(115,185,215,.10);
}
.mobileLegalFootnote strong{
color:#347fa2;
font-size:10px;
}
.mobileLegalFootnote p{
margin:4px 0 0;
color:#7c919f;
font-size:10.5px;
line-height:1.55;
}
@media(max-width:720px){
.mobileLegalGrid{
grid-template-columns:1fr;
}
}
/* MOBILE_LEGAL_BOTTOM_V8_END */
/* MOBILE_HERO_ICON_LIGHT_V9_START */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideIcon{
color:#ffffff !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.80),
inset 0 -8px 18px rgba(72,133,214,.08),
0 10px 24px rgba(75,157,204,.13),
0 0 22px rgba(98,205,242,.20) !important;
}
/* Mobile Tarife */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlide:nth-of-type(1)
.mobileHeroSlideIcon{
background:
linear-gradient(
135deg,
#7edcf3,
#78bdf2
) !important;
}
/* Rufnummer */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlide:nth-of-type(2)
.mobileHeroSlideIcon{
background:
linear-gradient(
135deg,
#8fcff5,
#8eacef
) !important;
}
/* Roaming */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlide:nth-of-type(3)
.mobileHeroSlideIcon{
background:
linear-gradient(
135deg,
#8fc8f1,
#9a9bea
) !important;
}
/* Support */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlide:nth-of-type(4)
.mobileHeroSlideIcon{
background:
linear-gradient(
135deg,
#79d8ec,
#86aae9
) !important;
}
/* MOBILE_HERO_ICON_LIGHT_V9_END */
/* MOBILE_HERO_ICON_LIGHT_V10_START */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideIcon{
color:#ffffff !important;
background:
linear-gradient(
135deg,
rgba(171,235,249,.94),
rgba(160,205,244,.92)
) !important;
border:
1px solid rgba(255,255,255,.88) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.96),
inset 0 -8px 18px rgba(104,169,228,.06),
0 10px 24px rgba(93,170,216,.12),
0 0 26px rgba(123,219,247,.24) !important;
text-shadow:
0 1px 2px rgba(48,112,155,.10) !important;
}
/* leichter Lichtfilm */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideIcon::before{
background:
linear-gradient(
135deg,
rgba(255,255,255,.80),
rgba(255,255,255,0)
) !important;
opacity:.82;
}
/* zweiter, ebenfalls heller blauer Glow */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideIcon::after{
background:
radial-gradient(
circle,
rgba(116,178,244,.30),
rgba(116,178,244,0) 70%
) !important;
}
/* MOBILE_HERO_ICON_LIGHT_V10_END */
/* MOBILE_HERO_REAL_LIGHT_V13_START */
/* =========================================================
RECHTE GESAMTKARTE
========================================================= */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroVisual{
background:
linear-gradient(
145deg,
rgba(255,255,255,.78) 0%,
rgba(252,254,255,.67) 38%,
rgba(240,250,255,.62) 100%
) !important;
border:
1px solid rgba(255,255,255,.94) !important;
box-shadow:
0 24px 60px rgba(92,155,192,.09),
0 0 48px rgba(147,220,248,.12),
inset 0 1px 0 rgba(255,255,255,1),
inset 0 -1px 0 rgba(218,242,252,.40) !important;
backdrop-filter:
blur(30px)
saturate(120%)
brightness(1.06) !important;
-webkit-backdrop-filter:
blur(30px)
saturate(120%)
brightness(1.06) !important;
}
/* =========================================================
HELLE AURORA IM HINTERGRUND
========================================================= */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroVisualBackground{
opacity:.82 !important;
background:
radial-gradient(
circle at 82% 16%,
rgba(147,231,255,.34),
transparent 38%
),
radial-gradient(
circle at 55% 12%,
rgba(189,213,255,.24),
transparent 35%
),
radial-gradient(
circle at 14% 80%,
rgba(211,207,255,.18),
transparent 39%
),
radial-gradient(
circle at 48% 48%,
rgba(255,255,255,.64),
transparent 58%
),
linear-gradient(
145deg,
rgba(255,255,255,.22),
rgba(230,247,255,.18)
) !important;
}
/* =========================================================
SU-IT MOBILE LABEL
========================================================= */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroVisualLabel{
color:#78a8c7 !important;
font-weight:850 !important;
text-shadow:
0 1px 0 rgba(255,255,255,.75);
}
/* =========================================================
ICON – DEUTLICH HELLER
zwei sehr helle Blautöne
========================================================= */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideIcon{
color:#ffffff !important;
background:
linear-gradient(
135deg,
#a9ecfa 0%,
#99d7f6 48%,
#a9c5f6 100%
) !important;
border:
1px solid rgba(255,255,255,.94) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.96),
inset 0 -7px 15px rgba(124,177,234,.05),
0 9px 23px rgba(101,171,215,.11),
0 0 25px rgba(149,226,251,.27) !important;
text-shadow:
0 1px 3px rgba(77,137,178,.12) !important;
}
/* heller Glass-Reflex */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideIcon::before{
background:
linear-gradient(
135deg,
rgba(255,255,255,.94),
rgba(255,255,255,.12)
) !important;
opacity:.88 !important;
}
/* Glow ebenfalls heller */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideIcon::after{
background:
radial-gradient(
circle,
rgba(174,215,255,.34),
rgba(174,215,255,0) 72%
) !important;
}
/* =========================================================
TITEL / TEXT ETWAS WEICHER
========================================================= */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlide h3{
color:#234c69 !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlide p{
color:#7b97a9 !important;
}
/* =========================================================
CHIPS – ALLE DEUTLICH HELLER
========================================================= */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags span{
color:#52758d !important;
border:
1px solid rgba(157,211,233,.34) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.92),
0 5px 14px rgba(97,156,185,.035) !important;
backdrop-filter:blur(10px) !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags span:nth-child(1){
background:
linear-gradient(
135deg,
rgba(232,250,255,.96),
rgba(221,246,253,.86)
) !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags span:nth-child(2){
background:
linear-gradient(
135deg,
rgba(238,247,255,.97),
rgba(226,240,253,.88)
) !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags span:nth-child(3){
background:
linear-gradient(
135deg,
rgba(246,243,255,.97),
rgba(235,231,253,.88)
) !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags span:nth-child(4){
background:
linear-gradient(
135deg,
rgba(236,250,253,.97),
rgba(226,245,250,.88)
) !important;
}
/* =========================================================
DOTS HELLER
========================================================= */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideDots span{
background:
rgba(173,207,226,.52) !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideDots span.is-active{
background:
linear-gradient(
90deg,
#83dcef,
#91adf4
) !important;
box-shadow:
0 0 13px rgba(136,210,244,.27) !important;
}
/* MOBILE_HERO_REAL_LIGHT_V13_END */
/* MOBILE_COLOR_RESTORE_V15_START */
/* Titel-Akzent wieder Blau -> Violett */
/* Rechte Glass-Karte wieder mit Blau/Cyan/Violett */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroVisual{
background:
linear-gradient(
145deg,
rgba(255,255,255,.76),
rgba(243,249,255,.62)
) !important;
border:
1px solid rgba(255,255,255,.92) !important;
box-shadow:
0 24px 58px rgba(79,132,167,.10),
0 0 38px rgba(126,202,239,.09),
inset 0 1px 0 rgba(255,255,255,.98) !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroVisualBackground{
background:
radial-gradient(
circle at 82% 18%,
rgba(115,218,250,.30),
transparent 36%
),
radial-gradient(
circle at 57% 12%,
rgba(142,147,245,.20),
transparent 34%
),
radial-gradient(
circle at 18% 82%,
rgba(142,117,242,.13),
transparent 38%
),
radial-gradient(
circle at 48% 48%,
rgba(255,255,255,.55),
transparent 58%
) !important;
}
/* ganz dezenter schräger Orange-Akzent */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroVisual::after{
content:"";
position:absolute;
width:190px;
height:42px;
right:-45px;
top:34px;
transform:rotate(-26deg);
background:
linear-gradient(
90deg,
rgba(255,192,122,0),
rgba(255,192,122,.12),
rgba(255,192,122,0)
);
filter:blur(3px);
pointer-events:none;
z-index:1;
}
/* Icon hell, aber mit leichtem Violett */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideIcon{
background:
linear-gradient(
135deg,
#9fe8f7 0%,
#88c9f1 50%,
#9ca9ef 100%
) !important;
color:#ffffff !important;
border:
1px solid rgba(255,255,255,.92) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 10px 24px rgba(80,151,207,.12),
0 0 22px rgba(125,207,247,.18) !important;
}
/* Chips wieder etwas mehr Violett / Blau */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags span:nth-child(1){
background:
linear-gradient(
135deg,
#e2f8fd,
#d7f0f9
) !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags span:nth-child(2){
background:
linear-gradient(
135deg,
#e6f1ff,
#dbe8fb
) !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags span:nth-child(3){
background:
linear-gradient(
135deg,
#efeaff,
#e1dbfb
) !important;
}
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideTags span:nth-child(4){
background:
linear-gradient(
135deg,
#e4f6fa,
#d9eef5
) !important;
}
/* aktiver Slider wieder Blau -> Violett */
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroSlideDots span.is-active{
background:
linear-gradient(
90deg,
#5fcce8,
#7c79ed
) !important;
box-shadow:
0 0 13px rgba(105,171,235,.22) !important;
}
/* Mobile Hero Buttons wieder neutral/blau statt Orange */
/* MOBILE_COLOR_RESTORE_V15_END */
/* MOBILE_HERO_TITLE_FINAL_V19_START */
/*
Gleiche Struktur wie Voice:
EIN normales H1, kein manuelles
, kein einzelner Span.
Dadurch funktionieren clamp(), Zeilenumbruch und Responsive
wieder wie bei "Telefonie, die mitwächst."
*/
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroIntro h1{
font-size:
clamp(50px,7vw,82px) !important;
line-height:
.94 !important;
letter-spacing:
-.055em !important;
margin:
12px 0 !important;
/*
Gleicher Charakter wie Voice:
links SU-IT Navy,
danach Blau,
rechts Blau/Violett.
Der Verlauf läuft über DAS GESAMTE H1.
*/
background-image:
linear-gradient(
90deg,
#173b55 0%,
#173b55 23%,
#315f92 43%,
#4f70bc 61%,
#637dea 80%,
#756cff 100%
) !important;
-webkit-background-clip:
text !important;
background-clip:
text !important;
color:
transparent !important;
}
/* Mobile sauber mitskalieren */
@media(max-width:760px){
body.servicePage.themeConnect
.pageHero.mobileHero
.mobileHeroIntro h1{
font-size:
48px !important;
line-height:
.96 !important;
}
}
/* MOBILE_HERO_TITLE_FINAL_V19_END */
/* SHOP_NETWORK_V1_START */
.shopLandingPage,
.shopNetworkPage{
--shopCopper:#b66f45;
--shopCopperDark:#78472f;
--shopSand:#f7eee6;
--shopCream:#fffaf6;
--shopInk:#173b55;
}
.shopWorldHero,
.networkShopHero{
position:relative;
overflow:hidden;
padding:76px 0 82px;
background:
radial-gradient(circle at 78% 20%,rgba(203,139,91,.20),transparent 28%),
radial-gradient(circle at 61% 75%,rgba(134,223,255,.13),transparent 25%),
linear-gradient(180deg,#fff,#fff9f4 58%,#f8eee7);
}
.shopWorldHeroGrid,
.networkShopHeroGrid{
display:grid;
grid-template-columns:minmax(0,.95fr) minmax(440px,1.05fr);
align-items:center;
gap:64px;
}
.shopWorldCopy h1,
.networkShopCopy h1{
max-width:780px;
margin:12px 0 22px;
color:#173b55;
font-size:clamp(54px,6.4vw,88px);
line-height:.96;
letter-spacing:-.058em;
}
.shopWorldCopy h1{
background:linear-gradient(100deg,#173b55 4%,#446c81 45%,#a9653f 92%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.networkShopCopy h1{
background:linear-gradient(100deg,#173b55,#8c5638 70%,#bf7a4e);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.shopWorldCopy .lead,
.networkShopCopy .lead{
max-width:680px;
}
.shopWorldVisual,
.networkShopVisual{
position:relative;
min-height:430px;
border:1px solid rgba(159,102,67,.15);
border-radius:34px;
overflow:hidden;
background:
linear-gradient(145deg,rgba(255,255,255,.88),rgba(250,235,224,.72));
box-shadow:
0 34px 90px rgba(93,63,45,.14),
inset 0 1px 0 rgba(255,255,255,.95);
backdrop-filter:blur(20px);
}
.shopWorldGlow{
position:absolute;
width:260px;
height:260px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border-radius:50%;
background:radial-gradient(circle,rgba(192,119,74,.24),transparent 67%);
}
.shopWorldCore{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:148px;
height:148px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border-radius:36px;
border:1px solid rgba(159,102,67,.18);
background:rgba(255,255,255,.88);
box-shadow:0 24px 60px rgba(116,73,47,.16);
}
.shopWorldCore span{
font-size:11px;
font-weight:900;
letter-spacing:.16em;
color:#b66f45;
}
.shopWorldCore strong{
margin-top:5px;
font-size:28px;
color:#173b55;
}
.shopWorldNode{
position:absolute;
display:flex;
align-items:center;
gap:12px;
padding:14px 17px;
min-width:170px;
border:1px solid rgba(161,106,70,.15);
border-radius:18px;
background:rgba(255,255,255,.9);
box-shadow:0 16px 42px rgba(105,73,54,.10);
animation:shopNodeFloat 5s ease-in-out infinite;
}
.shopWorldNode strong,
.shopWorldNode small{
display:block;
}
.shopWorldNode strong{color:#173b55}
.shopWorldNode small{margin-top:3px;color:#8699a3;font-size:11px}
.shopNodeIcon{
width:40px;
height:40px;
display:grid;
place-items:center;
border-radius:13px;
background:linear-gradient(145deg,#f8e8db,#fff);
color:#a85f37;
font-size:20px;
font-weight:900;
}
.nodeRouter{left:7%;top:14%}
.nodeFirewall{right:6%;top:22%;animation-delay:-1.5s}
.nodeFiber{left:15%;bottom:11%;animation-delay:-3s}
@keyframes shopNodeFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-8px)}
}
.shopWorldLine{
position:absolute;
height:1px;
transform-origin:left center;
background:linear-gradient(90deg,rgba(177,105,62,.12),rgba(177,105,62,.48),rgba(177,105,62,.08));
}
.lineOne{width:160px;left:28%;top:32%;transform:rotate(18deg)}
.lineTwo{width:150px;left:55%;top:47%;transform:rotate(-27deg)}
.lineThree{width:145px;left:30%;top:68%;transform:rotate(-13deg)}
.shopCategorySection,
.networkProductSection,
.networkCompatibilitySection{
padding:86px 0;
}
.shopCategoryHead,
.networkProductHead{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:32px;
margin-bottom:34px;
}
.shopCategoryHead h2,
.networkProductHead h2,
.networkCompatibilityGrid h2{
margin:5px 0 0;
color:#173b55;
font-size:clamp(38px,4.4vw,58px);
letter-spacing:-.045em;
line-height:1.02;
}
.shopCategoryHead>p,
.networkProductHead>p{
max-width:560px;
margin:0;
color:#6d8798;
line-height:1.7;
}
.shopCategoryGrid{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:22px;
}
.shopCategoryCard{
position:relative;
min-height:330px;
padding:32px;
border-radius:30px;
overflow:hidden;
border:1px solid rgba(155,101,67,.13);
background:#fff;
box-shadow:0 22px 64px rgba(92,66,48,.09);
transition:.3s ease;
}
.shopCategoryCard.toneNetwork{
background:
radial-gradient(circle at 85% 18%,rgba(191,122,77,.20),transparent 28%),
linear-gradient(145deg,#fff,#fff7f1);
}
.shopCategoryCard:hover{
transform:translateY(-5px);
box-shadow:0 30px 78px rgba(92,66,48,.14);
}
.shopCategoryNumber{
color:#b66f45;
font-size:11px;
font-weight:900;
letter-spacing:.14em;
}
.shopCategoryGlyph{
margin:28px 0 32px;
width:70px;
height:70px;
display:grid;
place-items:center;
border-radius:22px;
background:linear-gradient(145deg,#f5dfcf,#fff);
color:#a65f39;
font-size:31px;
font-weight:900;
}
.shopCategoryCard h3{
margin:0 0 10px;
font-size:31px;
color:#173b55;
}
.shopCategoryCard p{
max-width:530px;
color:#6d8798;
line-height:1.65;
}
.shopCategoryCard b{
display:block;
margin-top:20px;
color:#a65f39;
}
.shopCategoryCard.future{
opacity:.82;
}
.networkVisualGrid{
position:absolute;
inset:0;
opacity:.25;
background-image:
linear-gradient(rgba(151,100,67,.10) 1px,transparent 1px),
linear-gradient(90deg,rgba(151,100,67,.10) 1px,transparent 1px);
background-size:32px 32px;
}
.networkDevice{
position:absolute;
left:50%;
top:50%;
width:min(72%,390px);
transform:translate(-50%,-50%);
padding:25px;
border-radius:26px;
background:linear-gradient(155deg,#223d4d,#102b3b);
box-shadow:0 30px 75px rgba(33,48,57,.30);
color:white;
}
.networkDeviceTop{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:24px;
}
.networkDeviceTop span{
font-size:10px;
font-weight:900;
letter-spacing:.14em;
color:#d8b59b;
}
.networkDeviceTop i{
width:9px;
height:9px;
border-radius:50%;
background:#7ee5a0;
box-shadow:0 0 16px rgba(126,229,160,.8);
}
.networkPorts{
display:flex;
gap:9px;
margin-bottom:24px;
}
.networkPorts span{
width:38px;
height:26px;
border:2px solid rgba(255,255,255,.34);
border-radius:5px;
box-shadow:inset 0 -4px 0 rgba(183,116,73,.55);
}
.networkDevice strong{
display:block;
font-size:22px;
}
.networkDevice small{
display:block;
margin-top:7px;
color:#a9bdc8;
}
.networkFiberChip,
.networkStatusChip{
position:absolute;
padding:12px 15px;
border-radius:17px;
background:rgba(255,255,255,.92);
border:1px solid rgba(158,102,66,.14);
box-shadow:0 16px 40px rgba(86,62,47,.12);
}
.networkFiberChip{
right:7%;
top:13%;
}
.networkFiberChip span,
.networkFiberChip strong{
display:block;
}
.networkFiberChip span{
color:#b66f45;
font-size:11px;
font-weight:900;
}
.networkFiberChip strong{
color:#173b55;
margin-top:2px;
}
.networkStatusChip{
left:7%;
bottom:13%;
display:flex;
gap:8px;
align-items:center;
color:#547081;
font-size:11px;
font-weight:900;
letter-spacing:.08em;
}
.networkStatusChip i{
width:8px;
height:8px;
border-radius:50%;
background:#62c984;
box-shadow:0 0 13px rgba(98,201,132,.7);
}
.networkVisualPulse{
position:absolute;
border-radius:50%;
border:1px solid rgba(181,107,64,.22);
animation:networkPulse 4s ease-out infinite;
}
.pulseOne{
width:220px;
height:220px;
left:50%;
top:50%;
margin:-110px;
}
.pulseTwo{
width:320px;
height:320px;
left:50%;
top:50%;
margin:-160px;
animation-delay:-2s;
}
@keyframes networkPulse{
0%{transform:scale(.78);opacity:.7}
100%{transform:scale(1.18);opacity:0}
}
.networkProductSection{
background:linear-gradient(180deg,#fff,#fbf6f2);
}
.networkProductRail{
display:flex;
gap:20px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scrollbar-width:thin;
scrollbar-color:#c39373 #f4e9e1;
padding:8px 4px 24px;
}
.networkProductCard{
flex:0 0 min(360px,82vw);
scroll-snap-align:start;
min-height:455px;
padding:26px;
border-radius:28px;
background:#fff;
border:1px solid rgba(153,99,65,.13);
box-shadow:0 18px 54px rgba(90,64,47,.08);
}
.networkProductArt{
height:155px;
display:grid;
place-items:center;
margin-bottom:24px;
border-radius:23px;
background:
radial-gradient(circle at 60% 30%,rgba(200,135,91,.25),transparent 32%),
linear-gradient(145deg,#fbede2,#fff);
}
.networkProductSymbol{
width:76px;
height:76px;
display:grid;
place-items:center;
border-radius:24px;
border:1px solid rgba(166,96,56,.18);
background:rgba(255,255,255,.82);
color:#a9613b;
font-size:33px;
font-weight:900;
box-shadow:0 18px 42px rgba(102,67,44,.11);
}
.networkProductType{
color:#b66f45;
font-size:10px;
font-weight:900;
letter-spacing:.12em;
}
.networkProductCard h3{
margin:8px 0 9px;
color:#173b55;
font-size:29px;
}
.networkProductCard p{
min-height:78px;
color:#6d8798;
line-height:1.65;
}
.networkProductTags{
display:flex;
gap:7px;
flex-wrap:wrap;
margin:18px 0 24px;
}
.networkProductTags span{
padding:7px 9px;
border-radius:999px;
background:#f7eee8;
color:#8d5a3c;
font-size:10px;
font-weight:800;
}
.networkProductCard>b{
color:#9b6444;
}
.networkRailHint{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
color:#8b9ba3;
font-size:12px;
}
.networkRailHint span{
color:#ad714c;
font-size:18px;
}
.networkCompatibilitySection{
background:#fff;
}
.networkCompatibilityGrid{
display:grid;
grid-template-columns:.85fr 1.15fr;
gap:56px;
align-items:center;
}
.networkCompatibilityGrid>div>p:not(.k){
color:#6d8798;
line-height:1.7;
max-width:620px;
}
.compatibilityFlow{
display:flex;
align-items:center;
justify-content:center;
gap:13px;
}
.compatibilityFlow>div{
min-width:145px;
padding:20px;
border-radius:21px;
background:#fff9f4;
border:1px solid rgba(156,101,67,.13);
}
.compatibilityFlow span,
.compatibilityFlow strong,
.compatibilityFlow small{
display:block;
}
.compatibilityFlow span{
color:#b66f45;
font-size:10px;
font-weight:900;
}
.compatibilityFlow strong{
margin:7px 0 4px;
color:#173b55;
}
.compatibilityFlow small{
color:#8296a2;
line-height:1.4;
}
.compatibilityFlow>i{
color:#b97952;
font-style:normal;
font-size:22px;
}
/* SHOP_NAV_V1 */
.shopNavItem>.navlink{
color:#8f5839;
}
.shopNavItem>.navlink:hover,
.shopNavItem:focus-within>.navlink{
color:#a9623c;
background:#fff6ef;
}
.shopMega .megaIntro{
background:
radial-gradient(circle at 82% 15%,rgba(191,121,76,.13),transparent 30%),
linear-gradient(145deg,#fff,#fff9f4);
}
.shopMega .megaIntro span,
.shopMega .megaOverview{
color:#a9633e;
}
.shopMega .megaLinks a:hover{
background:#fff5ed;
color:#a9623c;
}
/* SHOP_NETWORK_V1_END */
/* NETWORK_GLASS_SIMULATION_V2_START */
body.shopNetworkPage .networkShopVisual.networkGlassSimulation{
position:relative;
min-height:430px;
overflow:hidden;
border-radius:34px;
border:1px solid rgba(171,130,96,.18);
background:
radial-gradient(circle at 80% 18%,rgba(198,149,107,.16),transparent 28%),
radial-gradient(circle at 20% 80%,rgba(219,191,166,.15),transparent 31%),
linear-gradient(145deg,rgba(255,255,255,.72),rgba(249,241,234,.52));
box-shadow:
0 28px 85px rgba(113,83,60,.10),
inset 0 1px 0 rgba(255,255,255,.92);
backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);
}
body.shopNetworkPage .networkShopVisual.networkGlassSimulation::before{
content:"";
position:absolute;
inset:18px;
border-radius:26px;
border:1px solid rgba(178,140,107,.10);
pointer-events:none;
}
body.shopNetworkPage .networkShopVisual.networkGlassSimulation .networkDevice,
body.shopNetworkPage .networkShopVisual.networkGlassSimulation .networkFiberChip,
body.shopNetworkPage .networkShopVisual.networkGlassSimulation .networkStatusChip,
body.shopNetworkPage .networkShopVisual.networkGlassSimulation .networkVisualPulse,
body.shopNetworkPage .networkShopVisual.networkGlassSimulation .networkVisualGrid{
display:none !important;
}
.networkSimGrid{
position:absolute;
inset:0;
opacity:.38;
background-image:
linear-gradient(rgba(171,130,96,.07) 1px,transparent 1px),
linear-gradient(90deg,rgba(171,130,96,.07) 1px,transparent 1px);
background-size:34px 34px;
mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
}
.networkSimNode{
position:absolute;
z-index:4;
display:flex;
align-items:center;
gap:12px;
padding:14px 16px;
min-width:150px;
border-radius:18px;
border:1px solid rgba(172,132,98,.18);
background:
linear-gradient(145deg,rgba(255,255,255,.72),rgba(251,246,241,.54));
box-shadow:
0 14px 38px rgba(114,84,61,.08),
inset 0 1px 0 rgba(255,255,255,.9);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
}
.networkSimNode strong,
.networkSimNode small{
display:block;
}
.networkSimNode strong{
color:#28465a;
font-size:14px;
}
.networkSimNode small{
margin-top:2px;
color:#8a7869;
font-size:10px;
}
.networkSimIcon{
width:40px;
height:40px;
display:grid;
place-items:center;
border-radius:13px;
border:1px solid rgba(174,133,98,.18);
background:
linear-gradient(145deg,rgba(255,255,255,.92),rgba(242,227,214,.68));
color:#9f6741;
font-size:20px;
font-weight:900;
}
.simProvider{
left:7%;
top:11%;
}
.simFiber{
left:39%;
top:18%;
}
.simGateway{
left:37%;
bottom:17%;
}
.simSite{
right:6%;
bottom:10%;
}
.networkSimModule{
position:absolute;
z-index:5;
right:8%;
top:12%;
width:96px;
padding:12px 13px;
border-radius:17px;
border:1px solid rgba(172,132,98,.18);
background:rgba(255,255,255,.72);
box-shadow:
0 14px 34px rgba(113,82,60,.08),
inset 0 1px 0 rgba(255,255,255,.9);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
}
.networkSimModule span,
.networkSimModule strong,
.networkSimModule small{
display:block;
}
.networkSimModule span{
color:#b27a53;
font-size:8px;
font-weight:900;
letter-spacing:.12em;
}
.networkSimModule strong{
margin-top:3px;
color:#384f5d;
font-size:18px;
}
.networkSimModule small{
margin-top:2px;
color:#887566;
font-size:9px;
}
.networkSimPath{
position:absolute;
z-index:2;
height:2px;
transform-origin:left center;
background:
linear-gradient(
90deg,
rgba(186,145,109,.16),
rgba(173,126,85,.52),
rgba(186,145,109,.16)
);
box-shadow:0 0 10px rgba(174,128,87,.10);
}
.networkSimPath::before{
content:"";
position:absolute;
inset:-6px 0;
border-top:1px dashed rgba(172,132,98,.16);
}
.networkSimPath i{
position:absolute;
top:50%;
left:0;
width:8px;
height:8px;
margin-top:-4px;
border-radius:50%;
background:#c99970;
box-shadow:
0 0 0 4px rgba(255,255,255,.46),
0 0 15px rgba(187,137,94,.40);
animation:networkSimMove 4.4s linear infinite;
}
.simPath1{
left:27%;
top:24%;
width:110px;
transform:rotate(8deg);
}
.simPath2{
left:56%;
top:28%;
width:110px;
transform:rotate(-2deg);
}
.simPath3{
left:51%;
top:49%;
width:105px;
transform:rotate(66deg);
}
.simPath4{
left:56%;
bottom:24%;
width:145px;
transform:rotate(-5deg);
}
.networkSimStatus{
position:absolute;
left:7%;
bottom:10%;
z-index:5;
display:flex;
align-items:center;
gap:8px;
padding:9px 12px;
border-radius:999px;
border:1px solid rgba(172,132,98,.16);
background:rgba(255,255,255,.68);
color:#7e6b5b;
font-size:10px;
font-weight:800;
letter-spacing:.04em;
box-shadow:
0 10px 28px rgba(109,81,61,.07),
inset 0 1px 0 rgba(255,255,255,.9);
}
.networkSimStatus span{
width:7px;
height:7px;
border-radius:50%;
background:#77c892;
box-shadow:0 0 12px rgba(119,200,146,.65);
}
@keyframes networkSimMove{
0%{
left:0;
opacity:.25;
}
15%{
opacity:1;
}
85%{
opacity:1;
}
100%{
left:calc(100% - 8px);
opacity:.25;
}
}
/* NETWORK_GLASS_SIMULATION_V2_END */
/* NETWORK_FLOW_CLEAN_V3_START */
body.shopNetworkPage
.networkShopVisual.networkFlowV3{
position:relative;
display:flex;
flex-direction:column;
justify-content:center;
min-height:430px;
padding:30px 28px 26px;
overflow:hidden;
border-radius:34px;
border:
1px solid rgba(164,120,84,.16);
background:
radial-gradient(
circle at 84% 15%,
rgba(198,150,109,.13),
transparent 30%
),
radial-gradient(
circle at 15% 85%,
rgba(215,188,163,.12),
transparent 31%
),
linear-gradient(
145deg,
rgba(255,255,255,.77),
rgba(250,244,238,.55)
);
box-shadow:
0 28px 80px rgba(109,78,56,.10),
inset 0 1px 0 rgba(255,255,255,.95);
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
}
body.shopNetworkPage
.networkShopVisual.networkFlowV3::before{
content:"";
position:absolute;
inset:18px;
border-radius:26px;
border:
1px solid rgba(173,132,97,.09);
pointer-events:none;
}
.networkFlowGrid{
position:absolute;
inset:0;
opacity:.28;
background-image:
linear-gradient(
rgba(171,128,92,.06) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(171,128,92,.06) 1px,
transparent 1px
);
background-size:31px 31px;
mask-image:
linear-gradient(
to bottom,
transparent,
#000 12%,
#000 88%,
transparent
);
}
.networkFlowHeader{
position:relative;
z-index:4;
display:flex;
align-items:center;
gap:8px;
margin:0 0 34px 4px;
color:#705b49;
}
.networkFlowHeader strong{
font-size:11px;
font-weight:850;
letter-spacing:.08em;
text-transform:uppercase;
}
.networkFlowHeader small{
color:#9a8878;
font-size:10px;
}
.networkFlowStatusDot{
width:7px;
height:7px;
border-radius:50%;
background:#78ca93;
box-shadow:
0 0 12px rgba(120,202,147,.65);
}
/* ========================================
HAUPTSTRECKE
======================================== */
.networkFlowTrack{
position:relative;
z-index:4;
width:100%;
display:grid;
grid-template-columns:
minmax(82px,1fr)
34px
minmax(82px,1fr)
34px
minmax(76px,.9fr)
34px
minmax(92px,1.15fr)
34px
minmax(92px,1.1fr);
align-items:center;
gap:4px;
}
/* ========================================
NODE
======================================== */
.networkFlowStep{
position:relative;
min-width:0;
display:flex;
flex-direction:column;
align-items:center;
gap:9px;
padding:15px 8px 13px;
text-align:center;
border-radius:18px;
border:
1px solid rgba(171,128,92,.15);
background:
linear-gradient(
145deg,
rgba(255,255,255,.78),
rgba(248,241,235,.56)
);
box-shadow:
0 12px 30px rgba(107,76,54,.07),
inset 0 1px 0 rgba(255,255,255,.92);
backdrop-filter:blur(15px);
-webkit-backdrop-filter:blur(15px);
transition:
transform .28s ease,
box-shadow .28s ease,
border-color .28s ease;
}
.networkFlowStep:hover{
transform:translateY(-4px);
border-color:
rgba(171,118,75,.25);
box-shadow:
0 18px 38px rgba(108,77,54,.11),
inset 0 1px 0 rgba(255,255,255,.95);
}
.networkFlowIcon{
width:42px;
height:42px;
flex:0 0 42px;
display:grid;
place-items:center;
border-radius:13px;
border:
1px solid rgba(172,128,90,.16);
background:
linear-gradient(
145deg,
rgba(255,255,255,.95),
rgba(244,229,216,.68)
);
color:#a56a42;
font-size:19px;
font-weight:800;
box-shadow:
0 8px 18px rgba(121,85,59,.07),
inset 0 1px 0 rgba(255,255,255,.9);
}
.networkFlowStep strong{
display:block;
color:#304d60;
font-size:12px;
line-height:1.2;
white-space:nowrap;
}
.networkFlowStep small{
display:block;
margin-top:3px;
color:#938172;
font-size:9px;
line-height:1.25;
white-space:nowrap;
}
/* ========================================
VERBINDUNGSLINIEN
======================================== */
.networkFlowLink{
position:relative;
height:18px;
}
.networkFlowLink::before{
content:"";
position:absolute;
left:-4px;
right:-4px;
top:50%;
height:1px;
background:
linear-gradient(
90deg,
rgba(174,129,91,.15),
rgba(171,120,77,.52),
rgba(174,129,91,.15)
);
}
.networkFlowLink::after{
content:"";
position:absolute;
left:-4px;
right:-4px;
top:calc(50% + 5px);
border-top:
1px dashed rgba(176,135,100,.13);
}
.networkFlowLink span{
position:absolute;
top:50%;
left:0;
width:7px;
height:7px;
margin-top:-3px;
border-radius:50%;
background:#c6956e;
box-shadow:
0 0 0 3px rgba(255,255,255,.48),
0 0 12px rgba(185,133,91,.38);
animation:
networkFlowPacket 3.6s linear infinite;
}
.networkFlowLink:nth-of-type(4) span{
animation-delay:-.9s;
}
.networkFlowLink:nth-of-type(6) span{
animation-delay:-1.8s;
}
.networkFlowLink:nth-of-type(8) span{
animation-delay:-2.7s;
}
@keyframes networkFlowPacket{
0%{
left:0;
opacity:.25;
}
20%{
opacity:1;
}
80%{
opacity:1;
}
100%{
left:calc(100% - 7px);
opacity:.25;
}
}
/* ========================================
UNTERE INFORMATIONEN
======================================== */
.networkFlowInfo{
position:relative;
z-index:4;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-top:34px;
}
.networkFlowInfo>div{
padding:11px 13px;
border-radius:14px;
border:
1px solid rgba(173,130,94,.10);
background:
rgba(255,255,255,.38);
}
.networkFlowInfo span{
display:block;
color:#b17a54;
font-size:8px;
font-weight:900;
letter-spacing:.1em;
}
.networkFlowInfo strong{
display:block;
margin-top:3px;
color:#536978;
font-size:10px;
}
.networkFlowInfo small{
display:block;
margin-top:2px;
color:#9b8c80;
font-size:8px;
}
/* alte V2-Elemente sicher deaktivieren */
body.shopNetworkPage
.networkFlowV3
.networkSimNode,
body.shopNetworkPage
.networkFlowV3
.networkSimModule,
body.shopNetworkPage
.networkFlowV3
.networkSimPath,
body.shopNetworkPage
.networkFlowV3
.networkSimStatus{
display:none !important;
}
/* NETWORK_FLOW_CLEAN_V3_END */
/* NETWORK_ROUTE_V5_START */
body.shopNetworkPage
.networkShopVisual.networkFlowV5{
position:relative;
min-height:430px;
padding:28px 30px 25px;
overflow:hidden;
border-radius:34px;
border:
1px solid rgba(163,120,83,.16);
background:
radial-gradient(
circle at 84% 14%,
rgba(201,154,112,.12),
transparent 30%
),
radial-gradient(
circle at 14% 86%,
rgba(219,192,166,.11),
transparent 31%
),
linear-gradient(
145deg,
rgba(255,255,255,.79),
rgba(249,243,237,.55)
);
box-shadow:
0 28px 82px rgba(104,76,55,.10),
inset 0 1px 0 rgba(255,255,255,.94);
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
}
body.shopNetworkPage
.networkShopVisual.networkFlowV5::before{
content:"";
position:absolute;
inset:18px;
border-radius:26px;
border:
1px solid rgba(169,127,92,.09);
pointer-events:none;
}
.networkRouteV5Grid{
position:absolute;
inset:0;
opacity:.25;
background-image:
linear-gradient(
rgba(173,130,94,.055) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(173,130,94,.055) 1px,
transparent 1px
);
background-size:31px 31px;
mask-image:
linear-gradient(
to bottom,
transparent 0,
#000 12%,
#000 88%,
transparent 100%
);
}
.networkRouteV5Header{
position:relative;
z-index:5;
display:flex;
align-items:center;
gap:8px;
margin:0 0 20px 4px;
color:#755f4d;
}
.networkRouteV5Header>span{
width:7px;
height:7px;
border-radius:50%;
background:#75ca91;
box-shadow:
0 0 12px rgba(117,202,145,.65);
}
.networkRouteV5Header strong{
font-size:11px;
font-weight:850;
text-transform:uppercase;
letter-spacing:.08em;
}
.networkRouteV5Header small{
color:#9b8a7b;
font-size:10px;
}
/* ========================================
ROUTENFLÄCHE
======================================== */
.networkRouteV5Stage{
position:relative;
z-index:4;
height:250px;
margin:0 12px;
}
/* ========================================
KACHELN
======================================== */
.networkRouteV5Node{
position:absolute;
display:flex;
align-items:center;
gap:10px;
min-width:142px;
max-width:180px;
padding:13px 14px;
border-radius:17px;
border:
1px solid rgba(169,126,90,.15);
background:
linear-gradient(
145deg,
rgba(255,255,255,.81),
rgba(247,240,234,.56)
);
box-shadow:
0 12px 30px rgba(107,76,54,.07),
inset 0 1px 0 rgba(255,255,255,.92);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
transition:
transform .28s ease,
box-shadow .28s ease,
border-color .28s ease;
}
.networkRouteV5Node:hover{
transform:translateY(-3px);
border-color:
rgba(171,118,75,.23);
box-shadow:
0 18px 38px rgba(107,76,54,.11),
inset 0 1px 0 rgba(255,255,255,.94);
}
.networkRouteV5Icon{
flex:0 0 38px;
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:12px;
border:
1px solid rgba(171,129,92,.16);
background:
linear-gradient(
145deg,
rgba(255,255,255,.95),
rgba(244,229,216,.68)
);
color:#a56a42;
font-size:18px;
font-weight:800;
}
.networkRouteV5Node strong,
.networkRouteV5Node small{
display:block;
}
.networkRouteV5Node strong{
color:#304d60;
font-size:12px;
line-height:1.2;
white-space:nowrap;
}
.networkRouteV5Node small{
margin-top:3px;
color:#928071;
font-size:9px;
line-height:1.25;
white-space:nowrap;
}
/* ========================================
POSITIONEN
OBEN LINKS -> RECHTS
DANN RUNTER -> UNTEN ZURÜCK
======================================== */
.routeV5Provider{
left:0;
top:8px;
}
.routeV5Access{
left:34%;
top:8px;
min-width:150px;
}
.routeV5Handover{
right:0;
top:8px;
min-width:155px;
}
.routeV5Router{
right:5%;
bottom:8px;
min-width:170px;
}
.routeV5Site{
left:8%;
bottom:8px;
min-width:170px;
}
/* ========================================
VERBINDUNGEN
======================================== */
.networkRouteV5Line{
position:absolute;
z-index:2;
}
.networkRouteV5Line::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(180,136,100,.15),
rgba(170,119,77,.50),
rgba(180,136,100,.15)
);
}
.networkRouteV5Line::after{
content:"";
position:absolute;
border-color:
rgba(174,130,94,.13);
border-style:dashed;
}
.networkRouteV5Line i{
position:absolute;
width:7px;
height:7px;
border-radius:50%;
background:#c8936b;
box-shadow:
0 0 0 3px rgba(255,255,255,.46),
0 0 12px rgba(186,134,91,.36);
animation:
networkRouteV5Packet 4s linear infinite;
}
/* PROVIDER -> FTTH / DSL */
.lineV5ProviderAccess{
left:25%;
top:39px;
width:17%;
height:1px;
}
.lineV5ProviderAccess::after{
left:0;
right:0;
top:5px;
border-width:1px 0 0 0;
}
.lineV5ProviderAccess i{
top:-3px;
left:0;
}
/* FTTH / DSL -> ÜBERGABE */
.lineV5AccessHandover{
left:59%;
top:39px;
width:16%;
height:1px;
}
.lineV5AccessHandover::after{
left:0;
right:0;
top:5px;
border-width:1px 0 0 0;
}
.lineV5AccessHandover i{
top:-3px;
left:0;
animation-delay:-1s;
}
/* ÜBERGABE -> ROUTER RUNTER */
.lineV5HandoverDown{
right:12%;
top:75px;
width:1px;
height:88px;
}
.lineV5HandoverDown::before{
background:
linear-gradient(
180deg,
rgba(180,136,100,.15),
rgba(170,119,77,.50),
rgba(180,136,100,.15)
);
}
.lineV5HandoverDown::after{
top:0;
bottom:0;
left:5px;
border-width:0 0 0 1px;
}
.lineV5HandoverDown i{
top:0;
left:-3px;
animation:
networkRouteV5PacketVertical
4s linear infinite;
animation-delay:-2s;
}
/* ROUTER -> STANDORT NACH LINKS */
.lineV5RouterSite{
left:35%;
bottom:39px;
width:39%;
height:1px;
transform:scaleX(-1);
}
.lineV5RouterSite::after{
left:0;
right:0;
top:5px;
border-width:1px 0 0 0;
}
.lineV5RouterSite i{
top:-3px;
left:0;
animation-delay:-3s;
}
/* ========================================
DATENPAKETE
======================================== */
@keyframes networkRouteV5Packet{
0%{
left:0;
opacity:.2;
}
18%{
opacity:1;
}
82%{
opacity:1;
}
100%{
left:calc(100% - 7px);
opacity:.2;
}
}
@keyframes networkRouteV5PacketVertical{
0%{
top:0;
opacity:.2;
}
18%{
opacity:1;
}
82%{
opacity:1;
}
100%{
top:calc(100% - 7px);
opacity:.2;
}
}
/* ========================================
UNTERE INFO-LEISTE
======================================== */
.networkRouteV5Legend{
position:relative;
z-index:5;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
margin-top:12px;
}
.networkRouteV5Legend>div{
min-width:0;
padding:9px 10px;
border-radius:14px;
border:
1px solid rgba(172,129,94,.10);
background:
rgba(255,255,255,.36);
}
.networkRouteV5Legend span{
display:block;
color:#b17a54;
font-size:8px;
font-weight:900;
letter-spacing:.10em;
}
.networkRouteV5Legend strong{
display:block;
margin-top:3px;
color:#536978;
font-size:10px;
}
.networkRouteV5Legend small{
display:block;
margin-top:2px;
color:#9b8c80;
font-size:8px;
white-space:nowrap;
}
/* ÄLTERE SIMULATIONSSTRUKTUREN AUSBLENDEN */
body.shopNetworkPage
.networkFlowV5
.networkFlowTrack,
body.shopNetworkPage
.networkFlowV5
.networkFlowInfo,
body.shopNetworkPage
.networkFlowV5
.networkFlowHeader,
body.shopNetworkPage
.networkFlowV5
.networkSimNode,
body.shopNetworkPage
.networkFlowV5
.networkSimModule,
body.shopNetworkPage
.networkFlowV5
.networkSimPath,
body.shopNetworkPage
.networkFlowV5
.networkSimStatus{
display:none !important;
}
/* NETWORK_ROUTE_V5_END */
/* CONNECT_INTERNET_NETWORK_HERO_V1_START */
body.servicePage.themeConnect
.internetHeroV1{
position:relative;
overflow:hidden;
padding:72px 0 80px;
background:
radial-gradient(
circle at 83% 15%,
rgba(102,198,236,.20),
transparent 29%
),
radial-gradient(
circle at 69% 76%,
rgba(126,220,255,.13),
transparent 31%
),
linear-gradient(
180deg,
#ffffff,
#f4fbff 53%,
#edf8fd
);
}
.internetHeroV1Shell{
display:grid;
grid-template-columns:
minmax(0,.92fr)
minmax(460px,1.08fr);
align-items:center;
gap:58px;
}
.internetHeroV1Copy{
min-width:0;
}
.internetHeroV1Copy h1{
margin:12px 0 20px;
max-width:760px;
font-size:
clamp(52px,6.2vw,82px);
line-height:.97;
letter-spacing:-.055em;
background:
linear-gradient(
96deg,
#173b55 0%,
#286d96 48%,
#4ab4df 100%
);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.internetHeroV1Copy>p:not(.k){
max-width:690px;
color:#688497;
font-size:18px;
line-height:1.7;
}
/* ========================================
GLAS-CONTAINER
======================================== */
.internetHeroNetwork{
position:relative;
min-height:430px;
padding:28px 30px 25px;
overflow:hidden;
border-radius:34px;
border:
1px solid rgba(76,157,199,.16);
background:
radial-gradient(
circle at 84% 14%,
rgba(101,196,234,.13),
transparent 30%
),
radial-gradient(
circle at 14% 86%,
rgba(151,220,247,.11),
transparent 31%
),
linear-gradient(
145deg,
rgba(255,255,255,.80),
rgba(239,249,254,.58)
);
box-shadow:
0 28px 82px rgba(47,119,153,.11),
inset 0 1px 0 rgba(255,255,255,.96);
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
}
.internetHeroNetwork::before{
content:"";
position:absolute;
inset:18px;
border-radius:26px;
border:
1px solid rgba(73,157,199,.09);
pointer-events:none;
}
.internetHeroNetworkGrid{
position:absolute;
inset:0;
opacity:.25;
background-image:
linear-gradient(
rgba(72,157,199,.055) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(72,157,199,.055) 1px,
transparent 1px
);
background-size:31px 31px;
mask-image:
linear-gradient(
to bottom,
transparent 0,
#000 12%,
#000 88%,
transparent 100%
);
}
/* ========================================
HEADER
======================================== */
.internetHeroNetworkHeader{
position:relative;
z-index:5;
display:flex;
align-items:center;
gap:8px;
margin:0 0 20px 4px;
color:#416d86;
}
.internetHeroNetworkHeader>span{
width:7px;
height:7px;
border-radius:50%;
background:#55c98e;
box-shadow:
0 0 12px rgba(85,201,142,.60);
}
.internetHeroNetworkHeader strong{
font-size:11px;
font-weight:850;
text-transform:uppercase;
letter-spacing:.08em;
}
.internetHeroNetworkHeader small{
color:#829aaa;
font-size:10px;
}
/* ========================================
ROUTENFLÄCHE
======================================== */
.internetHeroNetworkStage{
position:relative;
z-index:4;
height:250px;
margin:0 12px;
}
/* ========================================
KACHELN
======================================== */
.internetHeroNetworkNode{
position:absolute;
display:flex;
align-items:center;
gap:10px;
min-width:142px;
max-width:180px;
padding:13px 14px;
border-radius:17px;
border:
1px solid rgba(75,157,199,.15);
background:
linear-gradient(
145deg,
rgba(255,255,255,.82),
rgba(239,249,254,.58)
);
box-shadow:
0 12px 30px rgba(55,125,159,.07),
inset 0 1px 0 rgba(255,255,255,.94);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
transition:
transform .28s ease,
box-shadow .28s ease,
border-color .28s ease;
}
.internetHeroNetworkNode:hover{
transform:translateY(-3px);
border-color:
rgba(67,164,208,.27);
box-shadow:
0 18px 38px rgba(50,124,159,.12),
inset 0 1px 0 rgba(255,255,255,.96);
}
.internetHeroNetworkIcon{
flex:0 0 38px;
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:12px;
border:
1px solid rgba(72,160,202,.17);
background:
linear-gradient(
145deg,
rgba(255,255,255,.96),
rgba(222,244,253,.72)
);
color:#258fbd;
font-size:18px;
font-weight:800;
box-shadow:
0 8px 18px rgba(48,132,170,.07);
}
.internetHeroNetworkNode strong,
.internetHeroNetworkNode small{
display:block;
}
.internetHeroNetworkNode strong{
color:#284d64;
font-size:12px;
line-height:1.2;
white-space:nowrap;
}
.internetHeroNetworkNode small{
margin-top:3px;
color:#7892a2;
font-size:9px;
line-height:1.25;
white-space:nowrap;
}
/* ========================================
POSITIONEN
Provider -> FTTH/DSL -> Übergabe
↓
Standort <- Router
======================================== */
.ihProvider{
left:0;
top:8px;
}
.ihAccess{
left:34%;
top:8px;
min-width:150px;
}
.ihHandover{
right:0;
top:8px;
min-width:155px;
}
.ihRouter{
right:5%;
bottom:8px;
min-width:170px;
}
.ihSite{
left:8%;
bottom:8px;
min-width:170px;
}
/* ========================================
LINIEN
======================================== */
.internetHeroNetworkLine{
position:absolute;
z-index:2;
}
.internetHeroNetworkLine::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(84,172,213,.14),
rgba(54,155,202,.52),
rgba(84,172,213,.14)
);
}
.internetHeroNetworkLine::after{
content:"";
position:absolute;
border-color:
rgba(79,161,201,.14);
border-style:dashed;
}
.internetHeroNetworkLine i{
position:absolute;
width:7px;
height:7px;
border-radius:50%;
background:#55add3;
box-shadow:
0 0 0 3px rgba(255,255,255,.50),
0 0 12px rgba(64,165,210,.38);
animation:
internetHeroPacket
4s linear infinite;
}
/* Provider -> FTTH / DSL */
.ihLineProviderAccess{
left:25%;
top:39px;
width:17%;
height:1px;
}
.ihLineProviderAccess::after{
left:0;
right:0;
top:5px;
border-width:1px 0 0 0;
}
.ihLineProviderAccess i{
top:-3px;
left:0;
}
/* FTTH / DSL -> Übergabe */
.ihLineAccessHandover{
left:59%;
top:39px;
width:16%;
height:1px;
}
.ihLineAccessHandover::after{
left:0;
right:0;
top:5px;
border-width:1px 0 0 0;
}
.ihLineAccessHandover i{
top:-3px;
left:0;
animation-delay:-1s;
}
/* Übergabe -> Router */
.ihLineHandoverDown{
right:12%;
top:75px;
width:1px;
height:88px;
}
.ihLineHandoverDown::before{
background:
linear-gradient(
180deg,
rgba(84,172,213,.14),
rgba(54,155,202,.52),
rgba(84,172,213,.14)
);
}
.ihLineHandoverDown::after{
top:0;
bottom:0;
left:5px;
border-width:0 0 0 1px;
}
.ihLineHandoverDown i{
top:0;
left:-3px;
animation:
internetHeroPacketVertical
4s linear infinite;
animation-delay:-2s;
}
/* Router -> Standort */
.ihLineRouterSite{
left:35%;
bottom:39px;
width:39%;
height:1px;
transform:scaleX(-1);
}
.ihLineRouterSite::after{
left:0;
right:0;
top:5px;
border-width:1px 0 0 0;
}
.ihLineRouterSite i{
top:-3px;
left:0;
animation-delay:-3s;
}
/* ========================================
ANIMATION
======================================== */
@keyframes internetHeroPacket{
0%{
left:0;
opacity:.2;
}
18%{
opacity:1;
}
82%{
opacity:1;
}
100%{
left:calc(100% - 7px);
opacity:.2;
}
}
@keyframes internetHeroPacketVertical{
0%{
top:0;
opacity:.2;
}
18%{
opacity:1;
}
82%{
opacity:1;
}
100%{
top:calc(100% - 7px);
opacity:.2;
}
}
/* ========================================
INFO UNTEN
======================================== */
.internetHeroNetworkLegend{
position:relative;
z-index:5;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
margin-top:12px;
}
.internetHeroNetworkLegend>div{
min-width:0;
padding:9px 10px;
border-radius:14px;
border:
1px solid rgba(73,157,199,.10);
background:
rgba(255,255,255,.39);
}
.internetHeroNetworkLegend span{
display:block;
color:#2798c6;
font-size:8px;
font-weight:900;
letter-spacing:.10em;
}
.internetHeroNetworkLegend strong{
display:block;
margin-top:3px;
color:#506f82;
font-size:10px;
}
.internetHeroNetworkLegend small{
display:block;
margin-top:2px;
color:#879eac;
font-size:8px;
white-space:nowrap;
}
/* CONNECT_INTERNET_NETWORK_HERO_V1_END */
/* CONNECT_INTERNET_HERO_POSITION_FIX_V2_START */
/*
Das globale Service-Hero-Pseudo-Element belegt normalerweise
Grid-Spalte 2. Für den neuen Internet-Hero existiert dort aber
ein echtes Visual: .internetHeroNetwork.
*/
body.servicePage.themeConnect.internetPage
.pageHero.internetHeroV1
.internetHeroV1Shell::after{
content:none !important;
display:none !important;
}
/*
Hero bewusst auf exakt zwei reale Elemente begrenzen:
Copy links, Network-Simulation rechts.
*/
body.servicePage.themeConnect.internetPage
.pageHero.internetHeroV1
.internetHeroV1Shell{
display:grid !important;
grid-template-columns:
minmax(0,.92fr)
minmax(460px,1.08fr) !important;
grid-template-rows:auto !important;
gap:58px !important;
align-items:center !important;
}
body.servicePage.themeConnect.internetPage
.pageHero.internetHeroV1
.internetHeroV1Copy{
grid-column:1 !important;
grid-row:1 !important;
min-width:0 !important;
}
body.servicePage.themeConnect.internetPage
.pageHero.internetHeroV1
.internetHeroNetwork{
grid-column:2 !important;
grid-row:1 !important;
width:100% !important;
min-width:0 !important;
align-self:center !important;
}
/*
Sicherheit gegen ältere globale Hero-Visual-Regeln.
*/
body.servicePage.themeConnect.internetPage
.pageHero.internetHeroV1
.internetHeroV1Shell > .internetHeroNetwork{
position:relative !important;
inset:auto !important;
transform:none !important;
}
/* CONNECT_INTERNET_HERO_POSITION_FIX_V2_END */
/* INTERNET_FINAL_STRUCTURE_V3_START */
/* ======================================================
SPEED / AVAILABILITY – SCHLANK
====================================================== */
.internetSpeedCheckV3{
padding:34px 0 46px;
background:
linear-gradient(
180deg,
#f2faff 0%,
#f8fcff 100%
);
}
.internetSpeedCheckBar{
display:grid;
grid-template-columns:
minmax(260px,.8fr)
minmax(0,1.2fr);
align-items:center;
gap:28px;
padding:18px 20px;
border-radius:22px;
border:
1px solid rgba(72,159,201,.14);
background:
radial-gradient(
circle at 87% 12%,
rgba(96,194,235,.10),
transparent 29%
),
linear-gradient(
145deg,
rgba(255,255,255,.90),
rgba(240,249,254,.78)
);
box-shadow:
0 14px 35px rgba(48,119,154,.06),
inset 0 1px 0 rgba(255,255,255,.96);
}
.internetSpeedCheckIntro{
display:flex;
align-items:center;
gap:13px;
}
.internetSpeedCheckIcon{
flex:0 0 46px;
width:46px;
height:46px;
display:grid;
place-items:center;
border-radius:14px;
border:
1px solid rgba(69,158,202,.16);
background:
linear-gradient(
145deg,
#ffffff,
#e8f8fe
);
color:#2697c7;
font-size:21px;
font-weight:900;
}
.internetSpeedCheckIntro .k{
margin-bottom:3px;
}
.internetSpeedCheckIntro strong{
display:block;
color:#224b63;
font-size:16px;
line-height:1.25;
}
.internetSpeedCheckIntro small{
display:block;
margin-top:3px;
color:#849aa8;
font-size:10px;
}
.internetSpeedFields{
display:grid;
grid-template-columns:
1.15fr
.45fr
.8fr
auto;
align-items:end;
gap:8px;
}
.internetSpeedFields label{
display:grid;
gap:5px;
}
.internetSpeedFields label span{
color:#668395;
font-size:9px;
font-weight:800;
}
.internetSpeedFields input{
height:42px;
border-radius:12px;
border:
1px solid rgba(70,155,197,.15);
background:
rgba(255,255,255,.82);
padding:0 11px;
outline:none;
color:#284c61;
}
.internetSpeedFields input:focus{
border-color:
rgba(52,163,211,.38);
box-shadow:
0 0 0 3px rgba(65,173,219,.07);
}
.internetSpeedFields .glass{
min-height:42px;
white-space:nowrap;
}
.internetSpeedCheckHint{
margin:8px 4px 0;
color:#8da1ad;
font-size:9px;
}
.internetRouterFreedomV3
.internetFeatureRow{
margin:0;
border-radius:18px;
background:
linear-gradient(
90deg,
rgba(239,249,254,.80),
rgba(250,253,255,.94)
);
border:
1px solid rgba(73,158,200,.10);
}
/* ======================================================
DEVICE BANNERS – KLEIN UND LANGGEZOGEN
====================================================== */
.internetBoxStripV3,
.internetTvBoxStripV3{
padding:12px 0 26px;
background:
linear-gradient(
180deg,
#ffffff,
#f7fcff
);
}
.internetDeviceBanner{
display:grid;
grid-template-columns:
92px
minmax(0,1fr)
auto;
align-items:center;
gap:20px;
padding:16px 19px;
border-radius:21px;
border:
1px solid rgba(70,157,200,.13);
background:
radial-gradient(
circle at 85% 12%,
rgba(99,194,235,.09),
transparent 27%
),
linear-gradient(
145deg,
rgba(255,255,255,.92),
rgba(241,250,254,.78)
);
box-shadow:
0 12px 31px rgba(50,121,155,.055),
inset 0 1px 0 rgba(255,255,255,.97);
transition:
transform .25s ease,
border-color .25s ease;
}
.internetDeviceBanner:hover{
transform:translateY(-2px);
border-color:
rgba(56,163,211,.23);
}
.internetDeviceMiniVisual,
.internetTvMiniVisual{
position:relative;
width:86px;
height:62px;
}
/* INTERNET ROUTER */
.internetDeviceRouter{
position:absolute;
inset:5px 0 4px;
padding:10px;
border-radius:15px;
background:
linear-gradient(
145deg,
#e9f8fe,
#ffffff
);
border:
1px solid rgba(70,158,201,.15);
box-shadow:
0 8px 20px rgba(52,125,160,.07);
}
.internetDeviceRouter>span{
color:#258fbc;
font-size:7px;
font-weight:900;
letter-spacing:.10em;
}
.internetDeviceRouter>b{
position:absolute;
right:9px;
top:10px;
width:5px;
height:5px;
border-radius:50%;
background:#72ce91;
box-shadow:
0 0 7px rgba(114,206,145,.65);
}
.internetDevicePorts{
position:absolute;
left:10px;
bottom:10px;
display:flex;
gap:4px;
}
.internetDevicePorts i{
width:12px;
height:8px;
border-radius:2px;
border:
1px solid rgba(49,139,180,.29);
}
/* BANNER COPY */
.internetDeviceBannerText .k{
margin-bottom:3px;
}
.internetDeviceBannerText h3{
margin:0 0 5px;
color:#234a61;
font-size:
clamp(19px,1.8vw,26px);
letter-spacing:-.025em;
}
.internetDeviceBannerText p:not(.k){
margin:0;
color:#758d9c;
font-size:11px;
line-height:1.55;
}
.internetDeviceBannerLink{
display:flex;
align-items:center;
gap:10px;
padding:10px 13px;
border-radius:13px;
border:
1px solid rgba(67,159,202,.13);
background:
rgba(255,255,255,.65);
color:#258fbc;
font-size:11px;
font-weight:850;
white-space:nowrap;
transition:
background .2s ease,
transform .2s ease;
}
.internetDeviceBannerLink:hover{
transform:translateX(2px);
background:#eef9fe;
}
.internetDeviceBannerLink span{
font-size:16px;
}
/* ======================================================
RESTORED TV SECTION – VISUELL IN DEN VERLAUF EINBINDEN
====================================================== */
body.internetPage
#tv-kombi{
background:
radial-gradient(
circle at 85% 15%,
rgba(105,198,237,.10),
transparent 28%
),
linear-gradient(
180deg,
#f7fcff,
#ffffff
);
}
/* ======================================================
FAQ
====================================================== */
.internetFaqV3{
padding:62px 0 76px;
background:
radial-gradient(
circle at 81% 13%,
rgba(100,199,239,.10),
transparent 28%
),
linear-gradient(
180deg,
#ffffff,
#f3fafe
);
}
.internetFaqV3Head{
max-width:720px;
margin-bottom:24px;
}
.internetFaqV3Head h2{
margin:5px 0 9px;
color:#173b55;
font-size:
clamp(33px,3.7vw,50px);
line-height:1.04;
letter-spacing:-.04em;
}
.internetFaqV3Head>p:not(.k){
margin:0;
color:#728a99;
font-size:14px;
line-height:1.6;
}
.internetFaqV3List{
max-width:940px;
display:grid;
gap:8px;
}
.internetFaqV3List details{
overflow:hidden;
border-radius:16px;
border:
1px solid rgba(72,158,201,.11);
background:
rgba(255,255,255,.74);
box-shadow:
0 7px 22px rgba(48,119,153,.04);
}
.internetFaqV3List summary{
list-style:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:15px 17px;
color:#31566c;
font-size:13px;
font-weight:800;
}
.internetFaqV3List
summary::-webkit-details-marker{
display:none;
}
.internetFaqV3List summary i{
flex:0 0 25px;
width:25px;
height:25px;
display:grid;
place-items:center;
border-radius:8px;
background:#edf9fe;
color:#2999c8;
font-size:15px;
font-style:normal;
transition:transform .22s ease;
}
.internetFaqV3List
details[open]
summary i{
transform:rotate(45deg);
}
.internetFaqV3List details>p{
margin:0;
max-width:820px;
padding:
0 17px 16px;
color:#728a99;
font-size:12px;
line-height:1.65;
}
/* INTERNET_FINAL_STRUCTURE_V3_END */
/* CONNECT_TV_FINAL_START */
.tvConnectPage{
--tvBlue:#2398cf;
--tvBlueDark:#173f5a;
--tvCyan:#78d8f6;
--tvSoft:#eefaff;
}
.tvHeroV1{
position:relative;
overflow:hidden;
padding:74px 0 82px;
background:radial-gradient(
circle at 80% 15%,
rgba(91,195,237,.18),
transparent 29%
),
radial-gradient(
circle at 65% 78%,
rgba(138,220,247,.12),
transparent 30%
),
linear-gradient(
180deg,
#fff,
#f2fbff 55%,
#ecf8fd
);
}
.tvHeroGrid{
display:grid;
grid-template-columns:minmax(0,.93fr)
minmax(450px,1.07fr);
align-items:center;
gap:58px;
}
.tvHeroCopy h1{
margin:12px 0 20px;
max-width:760px;
font-size:
clamp(52px,6.2vw,82px);
line-height:.97;
letter-spacing:-.055em;
font-weight:800;
background:
linear-gradient(
96deg,
#1a5661 0%,
#278977 32%,
#45bd8b 64%,
#93dfb9 100%
);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
}
.tvHeroCopy .lead{
max-width:680px;
color:#688497;
font-size:18px;
line-height:1.7;
}
.tvHeroVisual{
position:relative;
min-height:430px;
overflow:hidden;
border-radius:34px;
border:1px solid rgba(68,158,201,.15);
background:radial-gradient(
circle at 80% 12%,
rgba(98,198,238,.14),
transparent 28%
),
linear-gradient(
145deg,
rgba(255,255,255,.82),
rgba(237,249,254,.60)
);
box-shadow:0 28px 82px rgba(47,119,153,.10),
inset 0 1px 0 rgba(255,255,255,.97);
backdrop-filter:blur(24px);
}
.tvHeroGridBg{
position:absolute;
inset:0;
opacity:.24;
background-image:linear-gradient(
rgba(65,158,202,.055) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(65,158,202,.055) 1px,
transparent 1px
);
background-size:32px 32px;
}
.tvHeroScreen{
position:absolute;
left:50%;
top:50%;
width:62%;
height:52%;
transform:translate(-50%,-50%);
display:grid;
place-items:center;
border-radius:27px;
border:1px solid rgba(67,159,203,.17);
background:linear-gradient(
145deg,
rgba(226,247,255,.88),
rgba(255,255,255,.94)
);
box-shadow:0 24px 58px rgba(43,123,161,.13);
}
.tvHeroScreenGlow{
position:absolute;
width:180px;
height:180px;
border-radius:50%;
background:radial-gradient(
circle,
rgba(65,181,229,.20),
transparent 68%
);
}
.tvHeroScreenContent{
position:relative;
text-align:center;
}
.tvHeroScreenContent span{
display:block;
color:#70b6d4;
font-size:11px;
font-weight:900;
letter-spacing:.17em;
}
.tvHeroScreenContent strong{
display:block;
margin:2px 0;
color:#2188b5;
font-size:64px;
letter-spacing:-.06em;
}
.tvHeroScreenContent small{
color:#86a5b4;
font-size:9px;
font-weight:800;
letter-spacing:.08em;
}
.tvHeroFeature{
position:absolute;
z-index:3;
display:flex;
align-items:center;
gap:9px;
padding:11px 13px;
border-radius:15px;
border:1px solid rgba(67,157,200,.14);
background:rgba(255,255,255,.77);
box-shadow:0 12px 28px rgba(49,121,156,.08);
backdrop-filter:blur(16px);
}
.tvHeroFeature>span{
width:32px;
height:32px;
display:grid;
place-items:center;
border-radius:10px;
background:#eaf8fe;
color:#2998c5;
font-weight:900;
}
.tvHeroFeature strong{
display:block;
color:#31556a;
font-size:11px;
}
.tvHeroFeature small{
display:block;
margin-top:2px;
color:#879daa;
font-size:8px;
}
.tvFeatureLive{
left:6%;
top:13%;
}
.tvFeatureReplay{
right:6%;
top:17%;
}
.tvFeatureMobile{
right:9%;
bottom:11%;
}
.tvPlansV1{
padding:72px 0;
background:linear-gradient(
180deg,
#fff,
#f5fbfe
);
}
.tvCompareV1{
padding:72px 0;
background:#fff;
}
.tvChannelsV1{
padding:72px 0;
background:linear-gradient(
180deg,
#fff,
#f3fafe
);
}
.tvLanguageV1{
padding:72px 0;
background:linear-gradient(
180deg,
#f3fafe,
#fff
);
}
.tvFaqV1{
padding:72px 0;
background:linear-gradient(
180deg,
#fff,
#f3fafe
);
}
.tvSectionHead{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:32px;
margin-bottom:28px;
}
.tvSectionHead h2{
margin:5px 0 0;
color:#173b55;
font-size:clamp(34px,4vw,54px);
line-height:1.03;
letter-spacing:-.044em;
}
.tvFaqHead h2{
margin:5px 0 0;
color:#173b55;
font-size:clamp(34px,4vw,54px);
line-height:1.03;
letter-spacing:-.044em;
}
.tvSectionHead>p{
max-width:560px;
margin:0;
color:#718a99;
line-height:1.65;
}
.tvPlanGrid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}
.tvPlanCard{
position:relative;
display:flex;
flex-direction:column;
min-height:560px;
padding:25px;
border-radius:26px;
border:1px solid rgba(71,158,201,.13);
background:linear-gradient(
145deg,
rgba(255,255,255,.94),
rgba(244,251,254,.84)
);
box-shadow:0 16px 48px rgba(49,120,154,.07);
}
.tvPlanFeatured{
transform:translateY(-8px);
border-color:rgba(58,167,215,.26);
box-shadow:0 24px 58px rgba(48,125,161,.11);
}
.tvPlanBadge{
position:absolute;
right:18px;
top:17px;
padding:6px 9px;
border-radius:999px;
background:#e7f8ff;
color:#278fb9;
font-size:8px;
font-weight:900;
letter-spacing:.06em;
}
.tvPlanLabel{
color:#2798c6;
font-size:9px;
font-weight:900;
letter-spacing:.12em;
}
.tvPlanTop h3{
margin:8px 0 8px;
color:#204b64;
font-size:29px;
}
.tvPlanTop p{
color:#78909f;
font-size:13px;
line-height:1.6;
}
.tvPlanFeatures{
display:grid;
gap:8px;
margin:21px 0 25px;
}
.tvPlanFeatures span{
color:#4f6d7f;
font-size:12px;
}
.tvPlanPrice{
margin-top:auto;
display:flex;
align-items:flex-end;
gap:8px;
}
.tvPlanPrice strong{
color:#173f5a;
font-size:45px;
letter-spacing:-.05em;
}
.tvPlanPrice span{
padding-bottom:7px;
color:#748c9a;
font-size:9px;
line-height:1.15;
}
.tvPlanSetup{
margin:7px 0 16px;
color:#8499a6;
font-size:10px;
}
.tvFeatureNote{
margin-top:15px;
color:#91a2ac;
font-size:9px;
}
.tvCompareTable{
overflow:hidden;
border-radius:22px;
border:1px solid rgba(71,157,199,.12);
background:#fff;
box-shadow:0 14px 40px rgba(47,119,153,.055);
}
.tvCompareRow{
display:grid;
grid-template-columns:minmax(240px,1.6fr)
repeat(3,.65fr);
align-items:center;
min-height:50px;
border-bottom:1px solid rgba(72,158,201,.08);
}
.tvCompareRow:last-child{
border-bottom:0;
}
.tvCompareRow>*{
padding:12px 15px;
}
.tvCompareHeader{
background:#eef9fe;
color:#31566c;
}
.tvCompareRow span{
color:#617d8d;
font-size:12px;
}
.tvCompareRow b{
text-align:center;
color:#2998c5;
font-size:13px;
}
.tvChannelOverview{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
}
.tvChannelOverview>div{
padding:19px;
border-radius:19px;
border:1px solid rgba(70,157,200,.12);
background:rgba(255,255,255,.77);
}
.tvChannelOverview strong{
display:block;
color:#238fbd;
font-size:27px;
}
.tvChannelOverview span{
display:block;
margin-top:4px;
color:#8095a2;
font-size:10px;
}
.tvChannelSearch{
display:grid;
grid-template-columns:48px minmax(0,1fr) auto;
align-items:center;
gap:14px;
margin-top:14px;
padding:15px 17px;
border-radius:19px;
border:1px solid rgba(70,158,201,.12);
background:rgba(255,255,255,.72);
}
.tvChannelSearch>span{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:13px;
background:#eaf8fe;
color:#2998c5;
font-size:20px;
}
.tvChannelSearch strong{
display:block;
color:#31566c;
font-size:13px;
}
.tvChannelSearch small{
display:block;
margin-top:3px;
color:#859ba8;
font-size:9px;
}
.tvChannelSearch a{
color:#278fb9;
font-size:11px;
font-weight:850;
}
.tvLanguageGrid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:9px;
}
.tvLanguageItem{
display:grid;
grid-template-columns:42px minmax(0,1fr) auto auto;
align-items:center;
gap:12px;
padding:13px 15px;
border-radius:16px;
border:1px solid rgba(70,157,200,.11);
background:rgba(255,255,255,.76);
}
.tvLanguageItem>span{
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:11px;
background:#e9f8fe;
color:#2997c4;
font-size:9px;
font-weight:900;
}
.tvLanguageItem strong{
display:block;
color:#36596e;
font-size:12px;
}
.tvLanguageItem small{
display:block;
margin-top:2px;
color:#889da9;
font-size:8px;
}
.tvLanguageItem>b{
color:#204d65;
font-size:17px;
}
.tvLanguageItem>em{
color:#8a9da8;
font-size:8px;
font-style:normal;
}
.tvFaqHead{
margin-bottom:24px;
}
.tvFaqList{
max-width:920px;
display:grid;
gap:8px;
}
.tvFaqList details{
overflow:hidden;
border-radius:16px;
border:1px solid rgba(71,157,200,.11);
background:rgba(255,255,255,.75);
}
.tvFaqList summary{
list-style:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:15px 17px;
color:#31566c;
font-size:13px;
font-weight:800;
}
.tvFaqList summary::-webkit-details-marker{
display:none;
}
.tvFaqList summary i{
width:25px;
height:25px;
display:grid;
place-items:center;
border-radius:8px;
background:#eaf8fe;
color:#2998c5;
font-style:normal;
transition:transform .2s;
}
.tvFaqList details[open] summary i{
transform:rotate(45deg);
}
.tvFaqList details>p{
margin:0;
padding:0 17px 16px;
color:#718a99;
font-size:12px;
line-height:1.65;
}
.tvPlanGrid .tvPlanCard:nth-child(1){
background:radial-gradient(
circle at 85% 10%,
rgba(105,202,241,.13),
transparent 25%
),
linear-gradient(
145deg,
#ffffff,
#f3fbff
);
}
.tvPlanGrid .tvPlanCard:nth-child(2){
background:radial-gradient(
circle at 85% 10%,
rgba(159,139,232,.13),
transparent 25%
),
linear-gradient(
145deg,
#ffffff,
#f7f4ff
);
}
.tvPlanGrid .tvPlanCard:nth-child(3){
background:radial-gradient(
circle at 85% 10%,
rgba(105,214,178,.13),
transparent 25%
),
linear-gradient(
145deg,
#ffffff,
#f3fcf8
);
}
.tvPlanGrid .tvPlanCard{
transition:transform .28s ease,
box-shadow .28s ease;
}
.tvPlanGrid .tvPlanCard:hover{
transform:translateY(-5px);
box-shadow:0 24px 54px rgba(49,120,154,.11);
}
.tvPlanGrid .tvPlanFeatured:hover{
transform:translateY(-12px);
}
.tvLanguageGrid .tvLanguageItem:nth-child(4n+1){
background:#f1faff;
}
.tvLanguageGrid .tvLanguageItem:nth-child(4n+2){
background:#f7f4ff;
}
.tvLanguageGrid .tvLanguageItem:nth-child(4n+3){
background:#f2fcf8;
}
.tvLanguageGrid .tvLanguageItem:nth-child(4n+4){
background:#fff7f0;
}
.tvChannelOverview>div:nth-child(1){
background:#eefaff;
}
.tvChannelOverview>div:nth-child(2){
background:#f4f0ff;
}
.tvChannelOverview>div:nth-child(3){
background:#eefbf6;
}
.tvChannelOverview>div:nth-child(4){
background:#fff5ec;
}
body.tvConnectPage{
--tvFinalBlue:#2594c2;
--tvFinalIndigo:#6674c7;
--tvFinalMint:#58a991;
--tvFinalInk:#173f57;
}
body.tvConnectPage .tvHeroV1{
background:radial-gradient(
circle at 81% 15%,
rgba(82,179,218,.18),
transparent 29%
),
radial-gradient(
circle at 67% 70%,
rgba(103,116,199,.11),
transparent 30%
),
radial-gradient(
circle at 94% 82%,
rgba(82,169,145,.10),
transparent 26%
),
linear-gradient(
135deg,
#ffffff 0%,
#f2faff 39%,
#f4f6ff 70%,
#f1faf7 100%
) !important;
}
body.tvConnectPage .tvHeroVisual{
border-color:rgba(90,159,199,.17);
background:radial-gradient(
circle at 78% 13%,
rgba(105,193,230,.16),
transparent 29%
),
radial-gradient(
circle at 18% 83%,
rgba(118,129,202,.09),
transparent 27%
),
linear-gradient(
145deg,
rgba(255,255,255,.88),
rgba(242,249,253,.72)
);
box-shadow:0 26px 72px rgba(44,105,137,.10),
inset 0 1px 0 rgba(255,255,255,.97);
}
.tvAudienceSwitchV4{
display:grid;
grid-template-columns:1fr 1fr;
width:min(350px,100%);
margin:0 auto 30px;
padding:5px;
border-radius:17px;
border:1px solid rgba(94,150,184,.15);
background:rgba(247,251,253,.92);
box-shadow:0 10px 25px rgba(46,96,124,.055),
inset 0 1px 0 rgba(255,255,255,.98);
}
.tvAudienceSwitchV4 button{
min-height:42px;
border:0;
border-radius:12px;
background:transparent;
color:#728a99;
font:inherit;
font-size:12px;
font-weight:850;
cursor:pointer;
transition:color .2s ease,
background .2s ease,
box-shadow .2s ease,
transform .2s ease;
}
.tvAudienceSwitchV4 button:hover{
color:#397d9e;
background:rgba(232,246,252,.66);
}
.tvAudienceSwitchV4 button.is-active{
color:#275f7b;
background:linear-gradient(
135deg,
#e3f6fd,
#eef4ff
);
box-shadow:0 6px 17px rgba(64,132,165,.10),
inset 0 1px 0 #fff;
}
body.tvConnectPage .tvPlanGrid{
gap:20px;
}
body.tvConnectPage .tvPlanCard{
border:1px solid rgba(72,153,194,.15);
box-shadow:0 18px 46px rgba(47,104,133,.07);
transition:transform .25s ease,
box-shadow .25s ease;
}
body.tvConnectPage .tvPlanCard:nth-child(1){
background:radial-gradient(
circle at 90% 7%,
rgba(85,189,228,.11),
transparent 27%
),
linear-gradient(
145deg,
#fff,
#f2fbfe
);
}
body.tvConnectPage .tvPlanCard:nth-child(2){
background:radial-gradient(
circle at 88% 8%,
rgba(118,122,199,.11),
transparent 27%
),
linear-gradient(
145deg,
#fff,
#f6f7ff
);
}
body.tvConnectPage .tvPlanCard:nth-child(3){
background:radial-gradient(
circle at 90% 8%,
rgba(100,190,166,.11),
transparent 27%
),
linear-gradient(
145deg,
#fff,
#f3fbf8
);
}
body.tvConnectPage .tvPlanCard:hover{
transform:translateY(-4px);
box-shadow:0 24px 58px rgba(47,104,133,.105);
}
body.tvConnectPage .tvPlanFeatured:hover{
transform:translateY(-4px);
}
body.tvConnectPage .tvPlanCard a.glass.firstTalk{
color:#244d63 !important;
background:rgba(255,255,255,.86) !important;
border:1px solid rgba(67,133,166,.17) !important;
box-shadow:0 7px 18px rgba(44,88,111,.045) !important;
}
body.tvConnectPage .tvPlanCard a.glass.firstTalk::before{
display:none !important;
content:none !important;
}
body.tvConnectPage .tvPlanCard a.glass.firstTalk::after{
display:none !important;
content:none !important;
}
body.tvConnectPage .tvPlanCard a.glass.firstTalk:hover{
color:#fff !important;
background:linear-gradient(
100deg,
#3dadd7,
#6274c4 56%,
#56a68f
) !important;
border-color:transparent !important;
transform:translateY(-2px);
}
body.tvConnectPage .tvLanguageItem{
border:1px solid rgba(74,137,171,.13);
box-shadow:0 7px 18px rgba(45,93,119,.035);
}
body.tvConnectPage .tvLanguageItem strong{
color:#294c60 !important;
font-weight:850 !important;
font-size:13px !important;
}
body.tvConnectPage .tvLanguageItem small{
color:#718996 !important;
}
body.tvConnectPage .tvLanguageItem>b{
color:#24526b !important;
font-size:18px !important;
font-weight:900 !important;
}
body.tvConnectPage .tvLanguageItem>em{
color:#657d89 !important;
}
body.tvConnectPage .tvLanguageGrid .tvLanguageItem:nth-child(4n+1){
background:linear-gradient(
135deg,
#f1faff,
#ffffff
);
}
body.tvConnectPage .tvLanguageGrid .tvLanguageItem:nth-child(4n+2){
background:linear-gradient(
135deg,
#f4f5ff,
#ffffff
);
}
body.tvConnectPage .tvLanguageGrid .tvLanguageItem:nth-child(4n+3){
background:linear-gradient(
135deg,
#f1faf7,
#ffffff
);
}
body.tvConnectPage .tvLanguageGrid .tvLanguageItem:nth-child(4n+4){
background:linear-gradient(
135deg,
#faf8f2,
#ffffff
);
}
body.tvConnectPage .tvPlansV1{
background:linear-gradient(
180deg,
#ffffff,
#f5fafd
) !important;
}
body.tvConnectPage .tvCompareV1{
background:linear-gradient(
180deg,
#f5fafd,
#ffffff
) !important;
}
body.tvConnectPage .tvChannelsV1{
background:linear-gradient(
180deg,
#ffffff,
#f4f7fc
) !important;
}
body.tvConnectPage .tvLanguageV1{
background:linear-gradient(
180deg,
#f4f7fc,
#f3f9f7
) !important;
}
body.tvConnectPage .tvFaqV1{
background:linear-gradient(
180deg,
#ffffff,
#f3f8fb
) !important;
}
body.tvConnectPage .tvPlanTop h3{
color:#254e66 !important;
font-size:30px !important;
font-weight:800 !important;
}
body.tvConnectPage .tvPlanTop p{
color:#607d8e !important;
}
body.tvConnectPage .tvPlanFeatures span{
color:#607d8e !important;
}
body.tvConnectPage .tvAudienceSwitchV4{
position:relative;
z-index:5;
display:grid;
grid-template-columns:1fr 1fr;
width:min(360px,100%);
margin:0 auto 32px;
padding:5px;
border-radius:17px;
border:1px solid rgba(62,137,176,.16);
background:rgba(248,252,254,.95);
box-shadow:0 10px 26px rgba(50,103,132,.06),
inset 0 1px 0 #fff;
}
body.tvConnectPage .tvAudienceSwitchV4 button{
position:relative;
z-index:6;
min-height:43px;
border:0;
border-radius:12px;
background:transparent;
color:#718996;
font:inherit;
font-size:12px;
font-weight:850;
cursor:pointer;
pointer-events:auto;
transition:.22s ease;
}
body.tvConnectPage .tvAudienceSwitchV4 button:hover{
color:#287da2;
background:rgba(230,246,252,.72);
}
body.tvConnectPage .tvAudienceSwitchV4 button.is-active{
color:#235f7c;
background:linear-gradient(
135deg,
#ddf4fd,
#eef2ff
);
box-shadow:0 7px 17px rgba(55,125,159,.11);
}
body.tvConnectPage .tvPlanGrid .tvPlanCard:nth-child(1){
background:radial-gradient(
circle at 91% 8%,
rgba(68,177,220,.11),
transparent 26%
),
linear-gradient(
145deg,
#fff,
#f3fbfe
) !important;
}
body.tvConnectPage .tvPlanGrid .tvPlanCard:nth-child(2){
background:radial-gradient(
circle at 90% 8%,
rgba(99,111,194,.105),
transparent 27%
),
linear-gradient(
145deg,
#fff,
#f5f7ff
) !important;
}
body.tvConnectPage .tvPlanGrid .tvPlanCard:nth-child(3){
background:radial-gradient(
circle at 90% 8%,
rgba(79,168,143,.11),
transparent 27%
),
linear-gradient(
145deg,
#fff,
#f2faf7
) !important;
}
body.servicePage.themeConnect .tvAccentGreen{
background:linear-gradient(
135deg,
#2dbd8f 0%,
#53c89d 35%,
#8cd8b8 70%,
#b2ead2 100%
);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.tvChannelPreviewSection{
padding:18px 0 24px;
background:transparent;
}
.tvChannelPreviewGrid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px;
margin-top:18px;
}
.tvChannelCard{
min-height:100%;
padding:24px 22px;
border-radius:28px;
border:1px solid rgba(166,216,198,.36);
background:radial-gradient(circle at 86% 18%, rgba(188,235,215,.18), transparent 26%),
radial-gradient(circle at 16% 82%, rgba(198,241,224,.14), transparent 22%),
linear-gradient(145deg, rgba(250,255,252,.96), rgba(245,252,248,.95));
box-shadow:0 18px 40px rgba(78,129,111,.08),
inset 0 1px 0 rgba(255,255,255,.95);
}
.tvChannelCard h3{
margin:8px 0 14px;
color:#1f4960;
font-size:28px;
line-height:1.14;
letter-spacing:-.02em;
}
.tvChannelCard p{
margin:0;
color:#567184;
font-size:15px;
line-height:1.72;
}
.tvChannelList{
list-style:none;
margin:0;
padding:0;
}
.tvChannelList li{
position:relative;
margin:0 0 10px;
padding-left:18px;
color:#385364;
font-size:15px;
line-height:1.6;
}
.tvChannelList li::before{
content:"";
position:absolute;
left:0;
top:10px;
width:7px;
height:7px;
border-radius:50%;
background:linear-gradient(135deg,#39b684,#8fdfbb);
box-shadow:0 0 0 4px rgba(92,196,149,.12);
}
.tvLanguageList li{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:16px;
padding-left:18px;
}
.tvLanguageList li span{
color:#17354b;
font-weight:700;
white-space:nowrap;
}
.tvInlineLink{
display:inline-flex;
align-items:center;
gap:8px;
margin-top:10px;
color:#2593c2;
font-weight:800;
text-decoration:none;
}
.tvInlineLink:hover{
text-decoration:underline;
}
.tvBoxMiniStrip{
padding:14px 0 26px;
background:transparent;
}
.tvBoxMiniLeft h3{
margin:6px 0 10px;
color:#214b62;
font-size:clamp(24px,2.4vw,34px);
line-height:1.12;
letter-spacing:-.02em;
}
.tvBoxMiniLeft p{
margin:0;
color:#5d7888;
font-size:15px;
line-height:1.68;
}
.tvBoxMiniRight{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:10px;
flex:0 0 auto;
}
.tvBoxMiniRight small{
color:#7a93a3;
font-size:12px;
line-height:1.5;
text-align:right;
}body.tvConnectPage .tvSectionHead h2,
body.tvConnectPage .tvFaqHead h2{
width:100%;
max-width:850px;
margin:0 auto;
text-align:center;
}
body.tvConnectPage .tvSectionHead h2,
body.tvConnectPage .tvFaqHead h2{
font-size:
clamp(38px,4.3vw,58px);
line-height:1.01;
letter-spacing:-.045em;
font-weight:800;
}
body.tvConnectPage .tvSectionHead{
width:100%;
max-width:980px;
margin-left:auto;
margin-right:auto;
margin-bottom:38px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
}
body.tvConnectPage .tvSectionHead h2{
width:100%;
max-width:900px;
margin:0 auto;
text-align:center;
}
body.tvConnectPage .tvSectionHead p{
width:100%;
max-width:700px;
margin:16px auto 0;
text-align:center;
line-height:1.7;
}
body.tvConnectPage .tvFaqHead{
width:100%;
max-width:900px;
margin-left:auto;
margin-right:auto;
margin-bottom:34px;
text-align:center;
}
body.tvConnectPage .tvBoxMiniLeft{
flex:1;
text-align:center;
}
body.tvConnectPage .tvBoxMiniLeft h3{
margin:4px 0 8px;
text-align:center;
}
body.tvConnectPage .tvBoxMiniLeft p{
margin:0;
text-align:center;
}
body.tvConnectPage .tvCompareV1 .tvSectionHead h2,
body.tvConnectPage .tvChannelsV1 .tvSectionHead h2,
body.tvConnectPage .tvLanguageV1 .tvSectionHead h2,
body.tvConnectPage .tvFaqV1 .tvFaqHead h2{
margin-left:auto;
margin-right:auto;
text-align:center;
}
body.tvConnectPage .tvCompareV1 .tvSectionHead p,
body.tvConnectPage .tvChannelsV1 .tvSectionHead p,
body.tvConnectPage .tvLanguageV1 .tvSectionHead p,
body.tvConnectPage .tvFaqV1 .tvFaqHead p{
max-width:760px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
body.tvConnectPage .tvChannelOverview{
justify-content:center;
}
body.tvConnectPage .tvChannelOverview > *{
text-align:center;
}
body.tvConnectPage .tvChannelScrollerNote{
text-align:center;
margin-left:auto;
margin-right:auto;
}
/* TV_CENTER_FIX_END */
/* TV_SCROLLER_NARROW_FIX_START */
body.tvConnectPage .tvChannelScroller{
max-width:760px;
margin-left:auto;
margin-right:auto;
}
body.tvConnectPage .tvChannelScrollerNote{
max-width:760px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
/* TV_SCROLLER_NARROW_FIX_END */
/* TV_TITLE_AXIS_FINAL_START */
/* Gemeinsame Mittelachse für alle TV-Inhaltsüberschriften */
body.tvConnectPage .tvPlansV1 .tvSectionHead,
body.tvConnectPage .tvCompareV1 .tvSectionHead,
body.tvConnectPage .tvChannelsV1 .tvSectionHead,
body.tvConnectPage .tvLanguageV1 .tvSectionHead,
body.tvConnectPage .tvFaqV1 .tvFaqHead{
width:100%;
max-width:980px;
margin-left:auto !important;
margin-right:auto !important;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center !important;
}
/* große H2-Titel */
body.tvConnectPage .tvPlansV1 .tvSectionHead h2,
body.tvConnectPage .tvCompareV1 .tvSectionHead h2,
body.tvConnectPage .tvChannelsV1 .tvSectionHead h2,
body.tvConnectPage .tvLanguageV1 .tvSectionHead h2,
body.tvConnectPage .tvFaqV1 .tvFaqHead h2{
width:100%;
max-width:900px;
margin-left:auto !important;
margin-right:auto !important;
text-align:center !important;
}
/* Beschreibungen darunter */
body.tvConnectPage .tvPlansV1 .tvSectionHead p,
body.tvConnectPage .tvCompareV1 .tvSectionHead p,
body.tvConnectPage .tvChannelsV1 .tvSectionHead p,
body.tvConnectPage .tvLanguageV1 .tvSectionHead p,
body.tvConnectPage .tvFaqV1 .tvFaqHead p{
width:100%;
max-width:760px;
margin-left:auto !important;
margin-right:auto !important;
text-align:center !important;
}
/* Falls einzelne Sections noch Grid/2-Spalten auf dem Head haben */
body.tvConnectPage .tvPlansV1 .tvSectionHead,
body.tvConnectPage .tvCompareV1 .tvSectionHead,
body.tvConnectPage .tvChannelsV1 .tvSectionHead,
body.tvConnectPage .tvLanguageV1 .tvSectionHead{
grid-template-columns:1fr !important;
}
/* TV Hardware ebenfalls optisch zentriert */
body.tvConnectPage .tvBoxMiniLeft{
text-align:center !important;
}
/* TV_TITLE_AXIS_FINAL_END */
/* TV_HERO_REMOTE_FINAL_START */
/* ------------------------------------------------------
TV HERO CONTAINER
------------------------------------------------------ */
body.tvConnectPage .tvHeroVisual{
position:relative;
min-height:430px;
overflow:hidden;
border-color:
rgba(72,174,132,.18);
background:
radial-gradient(
circle at 82% 15%,
rgba(133,224,179,.21),
transparent 29%
),
radial-gradient(
circle at 15% 82%,
rgba(72,170,130,.09),
transparent 27%
),
linear-gradient(
145deg,
rgba(253,255,254,.98),
rgba(238,250,244,.96)
);
box-shadow:
0 26px 68px rgba(42,113,86,.10),
inset 0 1px 0 rgba(255,255,255,.97);
}
/* ------------------------------------------------------
TV SCREEN
------------------------------------------------------ */
body.tvConnectPage .tvHeroScreen{
position:absolute;
left:59%;
top:46%;
width:62%;
height:54%;
transform:
translate(-50%,-50%);
display:grid;
place-items:center;
overflow:hidden;
border-radius:29px;
border:
1px solid rgba(72,184,139,.24);
background:
radial-gradient(
circle at 50% 45%,
rgba(98,222,157,.14),
transparent 56%
),
linear-gradient(
150deg,
rgba(238,251,245,.98),
rgba(253,255,254,.99)
);
box-shadow:
0 24px 58px rgba(42,129,94,.11),
0 0 60px rgba(97,207,151,.08);
z-index:1;
}
/* ------------------------------------------------------
TV GLOW
------------------------------------------------------ */
body.tvConnectPage .tvHeroScreenGlow{
position:absolute;
width:240px;
height:240px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(70,217,143,.30) 0%,
rgba(70,217,143,.16) 35%,
rgba(70,217,143,.06) 55%,
transparent 73%
);
filter:
blur(8px);
}
/* ------------------------------------------------------
TV TEXT
------------------------------------------------------ */
body.tvConnectPage .tvHeroScreenContent{
position:relative;
z-index:2;
text-align:center;
}
body.tvConnectPage
.tvHeroScreenContent > span{
display:block;
color:#206d57;
font-weight:900;
letter-spacing:.18em;
}
body.tvConnectPage
.tvHeroScreenContent > strong{
display:block;
margin:4px 0;
font-size:68px;
line-height:1;
letter-spacing:-.065em;
background:
linear-gradient(
135deg,
#155d54 0%,
#207b61 28%,
#2ca574 54%,
#52c88d 78%,
#92dfb3 100%
);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
filter:
drop-shadow(
0 9px 20px rgba(47,163,110,.11)
);
}
body.tvConnectPage
.tvHeroScreenContent > small{
color:#618e7c;
font-weight:850;
letter-spacing:.10em;
}
/* ------------------------------------------------------
FERNBEDIENUNG
------------------------------------------------------ */
body.tvConnectPage .tvHeroRemote{
position:absolute;
left:10%;
bottom:7%;
width:142px;
padding:
15px 12px 13px;
display:flex;
flex-direction:column;
gap:8px;
border-radius:34px;
border:
1px solid rgba(78,176,136,.22);
background:
linear-gradient(
160deg,
rgba(255,255,255,.98),
rgba(238,250,244,.96)
);
box-shadow:
0 25px 48px rgba(40,115,86,.14),
0 0 36px rgba(98,207,153,.10),
inset 0 1px 0 rgba(255,255,255,.96);
backdrop-filter:
blur(20px);
transform:
rotate(-5deg);
z-index:6;
transition:
transform .28s ease,
box-shadow .28s ease;
}
body.tvConnectPage
.tvHeroVisual:hover
.tvHeroRemote{
transform:
rotate(-3deg)
translateY(-3px);
box-shadow:
0 30px 54px rgba(40,115,86,.16),
0 0 45px rgba(98,207,153,.14),
inset 0 1px 0 rgba(255,255,255,.97);
}
/* Power */
body.tvConnectPage .tvHeroRemotePower{
width:31px;
height:31px;
margin:
0 auto 2px;
display:grid;
place-items:center;
border-radius:50%;
color:#26745c;
font-size:15px;
font-weight:900;
border:
1px solid rgba(68,164,125,.13);
background:
linear-gradient(
145deg,
#edf9f3,
#ffffff
);
}
/* Remote Buttons */
body.tvConnectPage
.tvHeroRemoteAction{
min-height:58px;
display:flex;
align-items:center;
gap:8px;
padding:
9px 8px;
border-radius:18px;
border:
1px solid rgba(70,168,128,.10);
background:
rgba(255,255,255,.76);
box-shadow:
0 5px 15px rgba(52,120,94,.04);
}
body.tvConnectPage
.tvHeroRemoteAction.is-live{
background:
linear-gradient(
145deg,
rgba(224,249,236,.98),
rgba(246,253,249,.98)
);
box-shadow:
0 8px 20px rgba(52,170,114,.10);
}
body.tvConnectPage
.tvHeroRemoteIcon{
flex:
0 0 30px;
width:30px;
height:30px;
display:grid;
place-items:center;
border-radius:10px;
color:#238961;
background:
#e6f8ef;
font-size:14px;
font-weight:900;
}
body.tvConnectPage
.tvHeroRemoteAction strong{
display:block;
color:#285d4f;
font-size:10px;
line-height:1.15;
white-space:nowrap;
}
body.tvConnectPage
.tvHeroRemoteAction small{
display:block;
margin-top:2px;
color:#819d90;
font-size:7px;
white-space:nowrap;
}
body.tvConnectPage
.tvHeroRemoteLine{
width:70%;
height:1px;
margin:
3px auto 1px;
background:
rgba(67,138,109,.15);
}
body.tvConnectPage
.tvHeroRemoteDots{
width:30px;
margin:
2px auto 0;
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:4px;
}
body.tvConnectPage
.tvHeroRemoteDots i{
display:block;
width:4px;
height:4px;
border-radius:50%;
background:
rgba(53,132,101,.30);
}
/* TV_HERO_REMOTE_FINAL_END */
/* TV_FINAL_ALIGNMENT_CLEAN_V4_START */
/* ======================================================
KLEINE ÜBERSCHRIFTEN
TV PAKETE
VERGLEICH
SENDERLISTE
SENDERPAKETE
TV HARDWARE
FAQ
====================================================== */
body.tvConnectPage .tvSectionHead .k,
body.tvConnectPage .tvFaqHead .k,
body.tvConnectPage .tvChannelEyebrow,
body.tvConnectPage .tvBoxMiniLeft .tvChannelEyebrow{
display:block !important;
width:100% !important;
max-width:none !important;
margin:
0 auto 10px !important;
padding:0 !important;
color:#2099c9 !important;
background:none !important;
-webkit-background-clip:initial !important;
background-clip:initial !important;
-webkit-text-fill-color:#2099c9 !important;
font-size:11px !important;
font-weight:850 !important;
line-height:1.2 !important;
letter-spacing:.16em !important;
text-transform:uppercase !important;
text-align:center !important;
text-shadow:none !important;
}
/* ======================================================
ALLE SECTION HEADS EXAKT AUF MITTELACHSE
====================================================== */
body.tvConnectPage .tvPlansV1 .tvSectionHead,
body.tvConnectPage .tvCompareV1 .tvSectionHead,
body.tvConnectPage .tvChannelsV1 .tvSectionHead,
body.tvConnectPage .tvLanguageV1 .tvSectionHead,
body.tvConnectPage .tvFaqV1 .tvFaqHead{
width:100% !important;
max-width:980px !important;
margin-left:auto !important;
margin-right:auto !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
body.tvConnectPage .tvPlansV1 .tvSectionHead h2,
body.tvConnectPage .tvCompareV1 .tvSectionHead h2,
body.tvConnectPage .tvChannelsV1 .tvSectionHead h2,
body.tvConnectPage .tvLanguageV1 .tvSectionHead h2,
body.tvConnectPage .tvFaqV1 .tvFaqHead h2{
width:100% !important;
max-width:900px !important;
margin-left:auto !important;
margin-right:auto !important;
text-align:center !important;
}
/* ======================================================
TV HARDWARE
eigener Kartenbereich ebenfalls mittig
====================================================== */
body.tvConnectPage .tvBoxMiniCard{
align-items:center !important;
}
body.tvConnectPage .tvBoxMiniLeft{
min-width:0 !important;
text-align:center !important;
}
body.tvConnectPage
.tvBoxMiniLeft
.tvChannelEyebrow{
width:100% !important;
margin:
0 auto 9px !important;
text-align:center !important;
}
body.tvConnectPage .tvBoxMiniLeft h3{
width:100% !important;
margin:
0 auto 8px !important;
text-align:center !important;
}
body.tvConnectPage .tvBoxMiniLeft p{
text-align:center !important;
}
/* ======================================================
LEGAL BOTTOM
====================================================== */
body.tvConnectPage .tvLegalBottom{
width:100% !important;
padding:
48px 0 54px !important;
}
body.tvConnectPage .tvLegalBottom .container{
width:min(calc(100% - 40px),560px) !important;
max-width:560px !important;
margin:0 auto !important;
padding:0 !important;
}
/* CARD IST NUR EIN VERTIKALER CONTAINER */
body.tvConnectPage .tvLegalCard{
position:relative !important;
display:block !important;
width:100% !important;
max-width:520px !important;
min-width:0 !important;
min-height:0 !important;
margin:0 auto !important;
padding:0 !important;
overflow:hidden !important;
border-radius:18px !important;
border:
1px solid rgba(86,181,140,.18) !important;
background:
linear-gradient(
110deg,
rgba(255,255,255,.99) 0%,
rgba(248,253,250,.99) 48%,
rgba(239,250,244,.98) 100%
) !important;
box-shadow:
0 12px 28px rgba(44,109,81,.055) !important;
}
/* HOVER ÜBER DIE GANZE BOX */
body.tvConnectPage .tvLegalCard::before{
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
opacity:0;
background:
radial-gradient(
circle at 15% 45%,
rgba(64,195,131,.17),
transparent 38%
),
radial-gradient(
circle at 86% 48%,
rgba(120,224,172,.24),
transparent 39%
),
linear-gradient(
105deg,
rgba(240,252,245,.97),
rgba(224,247,235,.99)
);
transition:
opacity .26s ease;
}
body.tvConnectPage .tvLegalCard:hover::before{
opacity:1;
}
body.tvConnectPage .tvLegalCard:hover{
border-color:
rgba(65,177,130,.34) !important;
box-shadow:
0 22px 46px rgba(46,119,87,.11),
0 0 38px rgba(98,207,153,.10) !important;
}
body.tvConnectPage .tvLegalCard > *{
position:relative;
z-index:1;
}
/* ======================================================
RECHTLICHES – OBERE ZEILE
====================================================== */
body.tvConnectPage .tvLegalToggle{
appearance:none !important;
box-sizing:border-box !important;
width:100% !important;
max-width:none !important;
min-width:0 !important;
min-height:64px !important;
margin:0 !important;
padding:
12px 16px !important;
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
align-items:center !important;
justify-content:space-between !important;
gap:14px !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
text-align:left !important;
cursor:pointer !important;
}
/* EXAKTER TITEL
DESKTOP IMMER VON LINKS NACH RECHTS IN EINER ZEILE */
body.tvConnectPage .tvLegalTitle{
display:block !important;
flex:1 1 auto !important;
width:auto !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
color:#28596b !important;
-webkit-text-fill-color:#28596b !important;
background:none !important;
font-size:16px !important;
font-weight:760 !important;
line-height:1.05 !important;
letter-spacing:-.02em !important;
text-align:left !important;
white-space:nowrap !important;
word-break:normal !important;
overflow-wrap:normal !important;
writing-mode:horizontal-tb !important;
transform:none !important;
}
/* PLUS */
body.tvConnectPage .tvLegalPlus{
flex:0 0 36px !important;
width:36px !important;
height:36px !important;
min-width:36px !important;
min-height:36px !important;
margin:0 !important;
padding:0 !important;
display:grid !important;
place-items:center !important;
border-radius:50% !important;
border:
1px solid rgba(81,180,139,.22) !important;
background:
linear-gradient(
145deg,
#eefaf4,
#dcf5e8
) !important;
color:#258a65 !important;
-webkit-text-fill-color:#258a65 !important;
font-size:17px !important;
font-weight:750 !important;
line-height:1 !important;
text-align:center !important;
box-shadow:
0 5px 12px rgba(62,143,107,.07) !important;
}
/* ======================================================
AUSGEKLAPPTER INHALT
====================================================== */
body.tvConnectPage .tvLegalContent{
position:relative !important;
display:block;
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:
0 16px 18px !important;
background:transparent !important;
}
body.tvConnectPage
.tvLegalContent[hidden]{
display:none !important;
}
body.tvConnectPage .tvLegalContent p{
width:100% !important;
margin:
0 0 15px !important;
color:#718b98 !important;
font-size:14px !important;
line-height:1.65 !important;
}
body.tvConnectPage .tvLegalLinks{
width:100% !important;
margin:
14px 0 0 !important;
display:flex !important;
flex-direction:row !important;
flex-wrap:wrap !important;
align-items:center !important;
gap:10px !important;
}
body.tvConnectPage .tvLegalLinks a,
body.tvConnectPage .tvLegalSoon{
width:auto !important;
max-width:100% !important;
margin:0 !important;
min-height:44px !important;
display:inline-flex !important;
align-items:center !important;
padding:
0 15px !important;
border-radius:999px !important;
}
/* TV_FINAL_ALIGNMENT_CLEAN_V4_END */
/* CONNECT_TV_FINAL_END */
/* TV_GREEN_LEGAL_BROADCAST_V1_START */
body.tvConnectPage{
--tvGreenDeep:#176b62;
--tvGreen:#34b88a;
--tvGreenSoft:#8fe0bb;
--tvMint:#dff8eb;
--tvMintSoft:#f2fcf7;
--tvAquaSoft:#edf9fb;
}
/* ======================================================
TV GESAMTSEITE – HELLER MINT / AQUA CHARAKTER
====================================================== */
body.tvConnectPage{
background:
linear-gradient(
180deg,
#fbfffd 0%,
#f6fcf9 38%,
#f3fbf8 72%,
#f8fcfb 100%
);
}
/* ======================================================
HERO
====================================================== */
body.tvConnectPage .tvHeroV1{
background:
radial-gradient(
circle at 15% 18%,
rgba(143,224,187,.17),
transparent 28%
),
radial-gradient(
circle at 80% 15%,
rgba(129,217,180,.18),
transparent 31%
),
radial-gradient(
circle at 68% 82%,
rgba(172,232,207,.14),
transparent 32%
),
linear-gradient(
180deg,
#fdfffe 0%,
#f4fcf8 48%,
#edf9f5 100%
);
}
/* ======================================================
TITEL – PETROL → MINT → HELLGRÜN
====================================================== */
body.tvConnectPage .tvSectionHead h2,
body.tvConnectPage .tvFaqHead h2{
background:
linear-gradient(
96deg,
#1b5261 0%,
#227b70 28%,
#39b887 58%,
#75d5a9 80%,
#a9e7c6 100%
);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
}
/* ======================================================
SEKTIONEN
====================================================== */
body.tvConnectPage .tvPlansV1{
background:
linear-gradient(
180deg,
#ffffff 0%,
#f6fcf9 100%
);
}
body.tvConnectPage .tvCompareV1{
background:
linear-gradient(
180deg,
#f8fdfb 0%,
#f0faf6 100%
);
}
body.tvConnectPage .tvChannelsV1{
background:
linear-gradient(
180deg,
#f4fbf8 0%,
#eef8f5 100%
);
}
body.tvConnectPage .tvLanguageV1{
background:
linear-gradient(
180deg,
#f2faf7 0%,
#f7fcfa 100%
);
}
body.tvConnectPage .tvFaqV1{
background:
linear-gradient(
180deg,
#f7fcfa 0%,
#f1faf6 100%
);
}
/* ======================================================
PLAN-KARTEN
====================================================== */
body.tvConnectPage .tvPlanCard{
border-color:
rgba(99,190,153,.16);
background:
radial-gradient(
circle at 88% 15%,
rgba(157,226,196,.10),
transparent 24%
),
linear-gradient(
150deg,
rgba(255,255,255,.98),
rgba(246,252,249,.96)
);
box-shadow:
0 18px 38px rgba(62,117,93,.07),
inset 0 1px 0 rgba(255,255,255,.98);
}
body.tvConnectPage .tvPlanFeatured{
background:
radial-gradient(
circle at 88% 16%,
rgba(137,220,182,.16),
transparent 26%
),
linear-gradient(
145deg,
rgba(253,255,254,.99),
rgba(238,250,244,.98)
);
}
/* ======================================================
PREIS / BADGES / DETAILS
====================================================== */
body.tvConnectPage .tvPlanBadge{
background:
rgba(79,198,147,.11);
color:
#238162;
}
body.tvConnectPage .tvPlanLabel{
color:
#27906d;
}
body.tvConnectPage .tvPlanPrice strong{
color:
#1d5264;
}
/* ======================================================
VERGLEICHSTABELLE
====================================================== */
body.tvConnectPage .tvCompareTable{
border:
1px solid rgba(100,190,153,.14);
background:
rgba(255,255,255,.88);
box-shadow:
0 16px 34px rgba(63,116,94,.05);
}
body.tvConnectPage .tvCompareHeader{
background:
linear-gradient(
90deg,
rgba(222,247,236,.74),
rgba(235,250,245,.82)
);
}
/* ======================================================
SENDER-KENNZAHLEN
====================================================== */
body.tvConnectPage .tvChannelOverview > *{
border-color:
rgba(94,190,151,.14);
background:
linear-gradient(
145deg,
rgba(253,255,254,.98),
rgba(239,250,245,.96)
);
}
/* ======================================================
SPRACHPAKETE
====================================================== */
body.tvConnectPage .tvLanguageItem{
border-color:
rgba(97,190,152,.15);
background:
linear-gradient(
145deg,
rgba(255,255,255,.97),
rgba(244,252,248,.96)
);
box-shadow:
0 10px 24px rgba(67,116,96,.045);
}
/* ======================================================
HERO TV VISUAL
====================================================== */
body.tvConnectPage .tvHeroVisual{
position:relative;
overflow:hidden;
border-color:
rgba(90,188,149,.18);
background:
radial-gradient(
circle at 82% 16%,
rgba(157,231,198,.20),
transparent 28%
),
radial-gradient(
circle at 15% 82%,
rgba(183,238,214,.13),
transparent 25%
),
linear-gradient(
145deg,
rgba(255,255,255,.96),
rgba(238,250,245,.95)
);
box-shadow:
0 24px 55px rgba(54,118,91,.09),
inset 0 1px 0 rgba(255,255,255,.96);
}
body.tvConnectPage .tvHeroBroadcast{
position:absolute;
inset:25% 18% 20% 18%;
overflow:hidden;
border-radius:30px;
pointer-events:none;
z-index:2;
background:
linear-gradient(
135deg,
rgba(13,91,78,.16),
rgba(40,157,122,.10) 43%,
rgba(108,211,165,.08) 100%
);
border:
1px solid rgba(111,211,168,.18);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.52),
0 16px 34px rgba(35,110,82,.08);
}
body.tvConnectPage .tvHeroBroadcast::before{
content:"";
position:absolute;
inset:-18% -30%;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(168,240,207,0) 20%,
rgba(168,240,207,.16) 50%,
rgba(168,240,207,0) 80%,
transparent 100%
);
animation:
tvBroadcastSweep 6.5s linear infinite;
}
body.tvConnectPage .tvHeroBroadcast::after{
content:"";
position:absolute;
inset:0;
background:
repeating-linear-gradient(
180deg,
rgba(255,255,255,.045) 0 2px,
transparent 2px 8px
);
opacity:.8;
}
body.tvConnectPage .tvBroadcastGlow{
position:absolute;
display:block;
border-radius:999px;
filter:blur(10px);
opacity:.62;
}
body.tvConnectPage .tvBroadcastGlowOne{
width:88px;
height:88px;
top:18%;
left:12%;
background:
rgba(142,235,195,.24);
animation:
tvGlowFloat 5.6s ease-in-out infinite;
}
body.tvConnectPage .tvBroadcastGlowTwo{
width:140px;
height:140px;
right:10%;
bottom:16%;
background:
rgba(84,203,158,.15);
animation:
tvGlowFloat 7.2s ease-in-out infinite reverse;
}
body.tvConnectPage .tvBroadcastTicker{
position:absolute;
left:8%;
right:8%;
bottom:9%;
height:11px;
border-radius:999px;
background:
linear-gradient(
90deg,
rgba(62,190,136,.12),
rgba(145,231,194,.58),
rgba(62,190,136,.12)
);
box-shadow:
0 0 18px rgba(112,220,173,.22);
animation:
tvTickerMove 3.2s ease-in-out infinite;
}
/* ======================================================
ANIMATION
====================================================== */
@keyframes tvBroadcastSweep{
0%{
transform:translateX(-18%);
}
100%{
transform:translateX(18%);
}
}
@keyframes tvGlowFloat{
0%,
100%{
transform:translate3d(0,0,0);
}
50%{
transform:translate3d(8px,-10px,0);
}
}
@keyframes tvTickerMove{
0%,
100%{
transform:scaleX(.92);
opacity:.82;
}
50%{
transform:scaleX(1);
opacity:1;
}
}
/* TV_GREEN_LEGAL_BROADCAST_V1_END */
/* TV_CHANNEL_SCROLL_COMPACT_SHOP_START */
/* ======================================================
SENDER SCROLLER
====================================================== */
body.tvConnectPage .tvChannelScroller{
position:relative;
overflow:hidden;
width:calc(100% - 72px);
max-width:920px;
margin:30px auto 0;
border-radius:22px;
border:
1px solid rgba(89,181,147,.15);
background:
linear-gradient(
145deg,
rgba(255,255,255,.98),
rgba(242,251,247,.96)
);
box-shadow:
0 14px 30px rgba(53,111,88,.05);
}
body.tvConnectPage .tvChannelScroller::before,
body.tvConnectPage .tvChannelScroller::after{
content:"";
position:absolute;
top:0;
bottom:0;
width:72px;
z-index:3;
pointer-events:none;
}
body.tvConnectPage .tvChannelScroller::before{
left:0;
background:
linear-gradient(
90deg,
rgba(247,252,250,.98),
rgba(247,252,250,0)
);
}
body.tvConnectPage .tvChannelScroller::after{
right:0;
background:
linear-gradient(
270deg,
rgba(247,252,250,.98),
rgba(247,252,250,0)
);
}
body.tvConnectPage .tvChannelTrack{
display:flex;
align-items:center;
gap:12px;
width:max-content;
padding:14px 18px;
animation:
tvChannelMarquee 38s linear infinite;
will-change:transform;
}
body.tvConnectPage .tvChannelScroller:hover .tvChannelTrack{
animation-play-state:paused;
}
body.tvConnectPage .tvChannelLogoCard{
display:flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
min-width:118px;
height:62px;
padding:0 15px;
border-radius:16px;
border:
1px solid rgba(124,179,158,.14);
background:
rgba(255,255,255,.96);
box-shadow:
0 6px 16px rgba(50,91,75,.04);
color:#31596a;
font-size:15px;
font-weight:850;
letter-spacing:-.02em;
}
body.tvConnectPage .tvChannelLogoCardAccent{
color:#1f8b6c;
background:
linear-gradient(
145deg,
#ffffff,
#eefaf5
);
}
body.tvConnectPage .tvChannelLogoCardRtl{
color:#d94b42;
background:
linear-gradient(
145deg,
#fff,
#fff4f2
);
}
body.tvConnectPage .tvChannelLogoCardBlue{
color:#2770a3;
background:
linear-gradient(
145deg,
#ffffff,
#f1f8fc
);
}
body.tvConnectPage .tvChannelLogoCardSat{
color:#8453a6;
background:
linear-gradient(
145deg,
#ffffff,
#f8f3fb
);
}
body.tvConnectPage .tvChannelLogoCardVox{
color:#5c66a8;
background:
linear-gradient(
145deg,
#ffffff,
#f4f5fc
);
}
body.tvConnectPage .tvChannelScrollerNote{
width:calc(100% - 72px);
max-width:920px;
margin:14px auto 0;
color:#79909a;
font-size:13px;
line-height:1.55;
}
/* ======================================================
TV BOX SHOP – SCHMALER / ZENTRIERT
====================================================== */
body.tvConnectPage .tvBoxMiniStrip{
padding:
28px 0 38px;
background:
linear-gradient(
180deg,
#f4fbf8 0%,
#f7fcfa 100%
);
}
body.tvConnectPage .tvBoxMiniStrip .container{
width:calc(100% - 72px);
max-width:800px;
margin-inline:auto;
}
body.tvConnectPage .tvBoxMiniCard{
width:100%;
max-width:760px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:22px 26px;
border-radius:22px;
border:
1px solid rgba(94,185,151,.16);
background:
radial-gradient(
circle at 86% 18%,
rgba(137,223,187,.12),
transparent 25%
),
linear-gradient(
145deg,
rgba(255,255,255,.99),
rgba(241,251,246,.97)
);
box-shadow:
0 14px 30px rgba(49,109,84,.05);
}
body.tvConnectPage .tvBoxMiniLeft{
max-width:680px;
}
body.tvConnectPage .tvBoxMiniLeft h3{
margin:
4px 0 8px;
color:#28576b;
font-size:
clamp(26px,2.5vw,34px);
line-height:1.1;
letter-spacing:-.03em;
}
body.tvConnectPage .tvBoxMiniLeft p{
margin:0;
color:#718995;
font-size:15px;
line-height:1.65;
}
body.tvConnectPage .tvBoxMiniRight{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:8px;
}
body.tvConnectPage .tvBoxMiniCard .tvBoxMiniRight a.glass.firstTalk{
min-height:44px;
padding:0 20px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
border:
1px solid rgba(47,170,116,.28) !important;
background:
linear-gradient(
135deg,
#43bd82 0%,
#78dba8 100%
) !important;
color:#ffffff !important;
font-weight:800;
box-shadow:
0 12px 26px rgba(51,159,108,.17) !important;
}
body.tvConnectPage .tvBoxMiniRight .glass.firstTalk:hover{
transform:translateY(-1px);
background:
linear-gradient(
135deg,
#43bb86,
#6fd5a3
);
}
body.tvConnectPage .tvBoxMiniRight small{
color:#8699a2;
font-size:12px;
}
/* ======================================================
ANIMATION
====================================================== */
@keyframes tvChannelMarquee{
from{
transform:translateX(0);
}
to{
transform:translateX(-42%);
}
}
body.tvConnectPage
.tvBoxMiniCard
.tvBoxMiniRight
a.glass.firstTalk::before,
body.tvConnectPage
.tvBoxMiniCard
.tvBoxMiniRight
a.glass.firstTalk::after{
content:none !important;
display:none !important;
}
/* TV_CHANNEL_SCROLL_COMPACT_SHOP_END */
/* VOICE_REDESIGN_V1_START */
/* ======================================================
SU-IT VOICE COLOR SYSTEM
====================================================== */
body.voicePage{
--voice-deep:#6f452f;
--voice-main:#a6633a;
--voice-mid:#d8894e;
--voice-light:#efb98b;
--voice-pale:#f9e8d8;
--voice-ice:#fff9f4;
--voice-ink:#4f4037;
--voice-muted:#84766e;
background:
#fff;
}
/* ======================================================
HERO
====================================================== */
body.voicePage .voiceHeroV2{
position:relative;
overflow:hidden;
padding:
76px 0 82px;
background:
radial-gradient(
circle at 88% 12%,
rgba(222,151,90,.22),
transparent 31%
),
radial-gradient(
circle at 60% 78%,
rgba(174,101,55,.08),
transparent 27%
),
linear-gradient(
135deg,
#ffffff 0%,
#fffaf6 48%,
#faeee4 100%
);
}
body.voicePage .voiceHeroV2::before{
content:"";
position:absolute;
width:520px;
height:520px;
right:-210px;
top:-260px;
border-radius:50%;
background:
rgba(218,139,75,.08);
filter:
blur(6px);
}
body.voicePage .voiceHeroV2Grid{
position:relative;
z-index:1;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(420px,520px);
align-items:center;
gap:
clamp(44px,6vw,90px);
}
body.voicePage .voiceHeroV2Copy{
min-width:0;
}
body.voicePage .voiceHeroV2 .crumbs{
margin-bottom:20px;
display:flex;
flex-wrap:wrap;
gap:8px;
color:#9293a4;
font-size:12px;
}
body.voicePage .voiceEyebrow{
margin:
0 0 13px;
color:var(--voice-main) !important;
font-size:11px;
font-weight:850;
letter-spacing:.17em;
text-transform:uppercase;
}
body.voicePage .voiceHeroV2 h1{
max-width:760px;
margin:
0 0 22px;
font-size:
clamp(52px,6.2vw,82px);
line-height:.97;
letter-spacing:-.055em;
font-weight:800;
background:
linear-gradient(
100deg,
#65402d 0%,
#a66238 38%,
#d88a4d 68%,
#efba8d 100%
);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
}
body.voicePage .voiceHeroLead{
max-width:690px;
margin:
0 0 28px;
color:#6f7187;
font-size:
clamp(16px,1.35vw,19px);
line-height:1.68;
}
body.voicePage .voiceHeroActions{
display:flex;
flex-wrap:wrap;
gap:11px;
}
body.voicePage .voicePrimaryButton,
body.voicePage .voiceSecondaryButton{
min-height:50px;
padding:
0 20px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:16px;
font-size:13px;
font-weight:800;
transition:
transform .22s ease,
box-shadow .22s ease,
border-color .22s ease,
background .22s ease;
}
body.voicePage .voicePrimaryButton{
color:#fff;
background:
linear-gradient(
135deg,
#98582f,
#d58848
);
border:
1px solid rgba(151,87,47,.18);
box-shadow:
0 13px 28px rgba(164,94,49,.19);
}
body.voicePage .voiceSecondaryButton{
color:#705548;
background:
rgba(255,255,255,.74);
border:
1px solid rgba(166,99,58,.16);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.92);
}
body.voicePage .voicePrimaryButton:hover,
body.voicePage .voiceSecondaryButton:hover{
transform:
translateY(-2px);
}
body.voicePage .voiceHeroFacts{
margin-top:27px;
display:flex;
flex-wrap:wrap;
gap:9px;
}
body.voicePage .voiceHeroFacts span{
padding:
9px 12px;
display:inline-flex;
align-items:center;
gap:6px;
border-radius:13px;
color:#77768c;
background:
rgba(255,255,255,.70);
border:
1px solid rgba(169,104,63,.11);
font-size:10px;
}
body.voicePage .voiceHeroFacts b{
color:#9b603d;
font-size:11px;
}
/* ======================================================
HERO CALL COCKPIT
====================================================== */
body.voicePage .voiceHeroCockpit{
position:relative;
min-height:440px;
overflow:hidden;
border-radius:34px;
border:
1px solid rgba(177,108,64,.16);
background:
radial-gradient(
circle at 76% 16%,
rgba(231,166,108,.21),
transparent 29%
),
radial-gradient(
circle at 20% 82%,
rgba(178,107,61,.09),
transparent 28%
),
linear-gradient(
145deg,
rgba(255,255,255,.94),
rgba(243,240,251,.88)
);
box-shadow:
0 28px 76px rgba(111,72,49,.13),
inset 0 1px 0 rgba(255,255,255,.98);
backdrop-filter:
blur(22px);
}
body.voicePage .voiceCockpitGrid{
position:absolute;
inset:0;
opacity:.30;
background-image:
linear-gradient(
rgba(174,106,61,.07) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(174,106,61,.07) 1px,
transparent 1px
);
background-size:
34px 34px;
mask-image:
linear-gradient(
to bottom,
transparent,
#000 24%,
#000 78%,
transparent
);
}
body.voicePage .voiceCallPanel{
position:absolute;
left:50%;
top:49%;
width:61%;
height:58%;
transform:
translate(-50%,-50%);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border-radius:29px;
border:
1px solid rgba(185,112,65,.17);
background:
radial-gradient(
circle at 50% 44%,
rgba(221,144,80,.16),
transparent 54%
),
linear-gradient(
150deg,
rgba(251,250,255,.96),
rgba(239,236,249,.93)
);
box-shadow:
0 24px 52px rgba(122,78,52,.11);
}
body.voicePage .voiceCallStatus{
position:absolute;
top:18px;
display:flex;
align-items:center;
gap:7px;
color:#777493;
font-size:9px;
font-weight:750;
letter-spacing:.05em;
}
body.voicePage .voiceCallStatus i{
width:7px;
height:7px;
display:block;
border-radius:50%;
background:#7a6bc0;
box-shadow:
0 0 0 5px rgba(205,126,68,.10);
}
body.voicePage .voiceCallRing{
width:150px;
height:150px;
display:grid;
place-items:center;
border-radius:50%;
border:
1px solid rgba(112,96,179,.14);
background:
radial-gradient(
circle,
rgba(232,164,105,.20),
rgba(232,164,105,.08) 42%,
rgba(255,255,255,.54) 68%,
transparent 70%
);
box-shadow:
0 0 50px rgba(207,126,67,.14);
}
body.voicePage .voiceCallCore{
text-align:center;
}
body.voicePage .voiceCallCore span{
display:block;
color:#98603d;
font-size:9px;
font-weight:900;
letter-spacing:.18em;
}
body.voicePage .voiceCallCore strong{
display:block;
margin:
4px 0;
color:#87502f;
font-size:32px;
letter-spacing:-.05em;
}
body.voicePage .voiceCallCore small{
color:#a99384;
font-size:7px;
font-weight:800;
letter-spacing:.08em;
}
body.voicePage .voiceCallNumber{
margin-top:10px;
text-align:center;
}
body.voicePage .voiceCallNumber small{
display:block;
color:#9996aa;
font-size:8px;
}
body.voicePage .voiceCallNumber strong{
display:block;
margin-top:3px;
color:#74594a;
font-size:11px;
}
body.voicePage .voiceFloatCard{
position:absolute;
z-index:5;
min-width:165px;
padding:
11px 13px;
display:flex;
align-items:center;
gap:9px;
border-radius:16px;
border:
1px solid rgba(178,107,63,.13);
background:
rgba(255,255,255,.88);
box-shadow:
0 13px 30px rgba(118,75,50,.09);
backdrop-filter:
blur(18px);
}
body.voicePage .voiceFloatSip{
left:7%;
top:20%;
}
body.voicePage .voiceFloatTeams{
right:5%;
top:26%;
}
body.voicePage .voiceFloatPort{
right:9%;
bottom:11%;
}
body.voicePage .voiceFloatIcon{
flex:
0 0 34px;
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:11px;
color:#a8663d;
background:
linear-gradient(
145deg,
#f8e9dc,
#fdf7f2
);
font-size:9px;
font-weight:900;
}
body.voicePage .voiceFloatCard strong{
display:block;
color:#5d4a40;
font-size:10px;
}
body.voicePage .voiceFloatCard small{
display:block;
margin-top:2px;
color:#9290a0;
font-size:7px;
}
/* ======================================================
SIGNAL STRIP
====================================================== */
body.voicePage .voiceSignalV2{
padding:
24px 0 44px;
background:
linear-gradient(
180deg,
#fffaf6,
#fff
);
}
body.voicePage .voiceSignalGrid{
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:13px;
}
body.voicePage .voiceSignalGrid article{
min-height:130px;
padding:19px;
display:flex;
gap:14px;
border-radius:22px;
border:
1px solid rgba(177,107,63,.12);
background:
rgba(255,255,255,.87);
box-shadow:
0 11px 25px rgba(107,70,48,.045);
transition:
transform .22s ease,
background .22s ease,
box-shadow .22s ease;
}
body.voicePage .voiceSignalGrid article:hover{
transform:
translateY(-3px);
background:
linear-gradient(
145deg,
#fff,
#f1edfb
);
box-shadow:
0 17px 34px rgba(126,79,51,.09);
}
body.voicePage .voiceSignalGrid article > span{
flex:
0 0 34px;
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:11px;
color:#ad6b3f;
background:#f9eadc;
font-size:9px;
font-weight:900;
}
body.voicePage .voiceSignalGrid small{
color:#ad7654;
font-size:8px;
font-weight:850;
letter-spacing:.10em;
text-transform:uppercase;
}
body.voicePage .voiceSignalGrid strong{
display:block;
margin:
4px 0 6px;
color:#53483f;
font-size:15px;
}
body.voicePage .voiceSignalGrid p{
margin:0;
color:#858698;
font-size:11px;
line-height:1.55;
}
/* ======================================================
COMMON SECTION HEAD
====================================================== */
body.voicePage .voiceSectionHead{
width:100%;
max-width:900px;
margin:
0 auto 34px;
text-align:center;
}
body.voicePage .voiceSectionHead .voiceEyebrow{
text-align:center;
}
body.voicePage .voiceSectionHead h2{
max-width:850px;
margin:
0 auto 15px;
color:#58473d;
font-size:
clamp(38px,4.5vw,60px);
line-height:1.02;
letter-spacing:-.047em;
font-weight:800;
background:
linear-gradient(
100deg,
#68422e,
#ad693d 47%,
#e1a36f 100%
);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
body.voicePage .voiceSectionHead > p:last-child{
max-width:690px;
margin:
0 auto;
color:#858599;
font-size:14px;
line-height:1.65;
}
/* ======================================================
PLANS
====================================================== */
body.voicePage .voicePlansSection{
padding:
70px 0;
background:
linear-gradient(
180deg,
#fff,
#fdf7f2
);
}
body.voicePage #voiceTariffGrid{
gap:16px;
}
body.voicePage #voiceTariffGrid > *{
border:
1px solid rgba(177,106,61,.13) !important;
background:
linear-gradient(
150deg,
rgba(255,255,255,.99),
rgba(247,245,252,.97)
) !important;
box-shadow:
0 15px 35px rgba(113,72,49,.06) !important;
transition:
transform .22s ease,
box-shadow .22s ease,
border-color .22s ease !important;
}
body.voicePage #voiceTariffGrid > *:hover{
transform:
translateY(-4px);
border-color:
rgba(191,116,66,.24) !important;
box-shadow:
0 22px 42px rgba(123,78,51,.11) !important;
}
body.voicePage .voicePlanNote{
max-width:820px;
margin:
20px auto 0;
color:#9291a0;
font-size:10px;
line-height:1.6;
text-align:center;
}
/* ======================================================
MINUTES
====================================================== */
body.voicePage .voiceMinuteSectionV2{
padding:
72px 0;
background:
radial-gradient(
circle at 16% 20%,
rgba(223,148,85,.10),
transparent 26%
),
#fdf6f0;
}
body.voicePage .voiceMinuteGridV2{
max-width:920px;
margin:auto;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:15px;
}
body.voicePage .voiceMinuteGridV2 article{
min-height:245px;
padding:23px;
border-radius:24px;
border:
1px solid rgba(175,105,60,.13);
background:
rgba(255,255,255,.90);
box-shadow:
0 13px 30px rgba(113,72,48,.055);
}
body.voicePage .voiceMinuteFeatured{
background:
linear-gradient(
145deg,
#f0ecfb,
#fff
) !important;
}
body.voicePage .voiceMinuteBadge{
width:39px;
height:39px;
display:grid;
place-items:center;
border-radius:12px;
color:#a5623a;
background:#f8e9dc;
font-size:8px;
font-weight:900;
}
body.voicePage .voiceMinuteGridV2 article > small{
display:block;
margin-top:17px;
color:#806f65;
font-size:10px;
font-weight:800;
}
body.voicePage .voiceMinutePrice{
margin:
8px 0 13px;
display:flex;
align-items:flex-end;
gap:6px;
}
body.voicePage .voiceMinutePrice strong{
color:#805036;
font-size:38px;
line-height:1;
}
body.voicePage .voiceMinutePrice span{
padding-bottom:4px;
color:#aa9789;
font-size:9px;
}
body.voicePage .voiceMinuteTextPrice strong{
font-size:23px;
}
body.voicePage .voiceMinuteGridV2 p{
margin:0;
color:#89899a;
font-size:11px;
line-height:1.6;
}
/* ======================================================
BUSINESS SOLUTIONS
====================================================== */
body.voicePage .voiceSolutionsSection{
padding:
78px 0;
background:#fff;
}
body.voicePage .voiceSolutionGrid{
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:16px;
}
body.voicePage .voiceSolutionCard{
min-height:410px;
padding:25px;
border-radius:25px;
border:
1px solid rgba(169,101,58,.13);
background:
linear-gradient(
145deg,
#fff,
#faf9fd
);
box-shadow:
0 14px 31px rgba(106,68,47,.055);
}
body.voicePage .voiceSolutionFeatured{
background:
radial-gradient(
circle at 86% 10%,
rgba(226,151,88,.16),
transparent 28%
),
linear-gradient(
145deg,
#fcf2e9,
#fff
);
}
body.voicePage .voiceSolutionIcon{
width:48px;
height:48px;
display:grid;
place-items:center;
border-radius:15px;
color:#a36039;
background:
linear-gradient(
145deg,
#f8e7d8,
#fdf7f2
);
font-size:10px;
font-weight:900;
}
body.voicePage .voiceCardEyebrow{
margin:
19px 0 6px;
color:#ac704b;
font-size:8px;
font-weight:900;
letter-spacing:.12em;
}
body.voicePage .voiceSolutionCard h3{
margin:
0 0 12px;
color:#55483f;
font-size:25px;
line-height:1.08;
letter-spacing:-.035em;
}
body.voicePage .voiceSolutionCard > p:not(.voiceCardEyebrow){
color:#878698;
font-size:12px;
line-height:1.6;
}
body.voicePage .voiceSolutionCard ul{
margin:
20px 0 0;
padding:0;
list-style:none;
}
body.voicePage .voiceSolutionCard li{
position:relative;
margin-bottom:9px;
padding-left:18px;
color:#68687b;
font-size:11px;
line-height:1.45;
}
body.voicePage .voiceSolutionCard li::before{
content:"✓";
position:absolute;
left:0;
color:#c47a45;
font-weight:900;
}
body.voicePage .voiceQuoteWrap{
max-width:900px;
margin:
54px auto 0;
padding:26px;
border-radius:26px;
border:
1px solid rgba(171,103,60,.12);
background:
linear-gradient(
140deg,
#fdf7f2,
#fff
);
}
body.voicePage .voiceQuoteHead{
margin-bottom:20px;
text-align:center;
}
body.voicePage .voiceQuoteHead h3{
max-width:620px;
margin:
0 auto;
color:#5c493e;
font-size:
clamp(25px,3vw,38px);
line-height:1.06;
letter-spacing:-.04em;
}
body.voicePage #voiceQuoteGrid{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
max-width:820px !important;
margin:
0 auto !important;
}
/* ======================================================
OPTIONS
====================================================== */
body.voicePage .voiceOptionsSection{
padding:
72px 0;
background:
linear-gradient(
180deg,
#fdf7f2,
#fbf1e8
);
}
body.voicePage .voiceOptionGrid{
max-width:900px;
margin:auto;
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:13px;
}
body.voicePage .voiceOptionGrid article{
min-height:105px;
padding:16px;
display:grid;
grid-template-columns:
42px
minmax(0,1fr)
auto;
align-items:center;
gap:12px;
border-radius:20px;
border:
1px solid rgba(175,105,60,.12);
background:
rgba(255,255,255,.91);
box-shadow:
0 11px 24px rgba(108,69,47,.045);
}
body.voicePage .voiceOptionGrid article > span{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:13px;
color:#a8673e;
background:#f8e9dc;
font-size:8px;
font-weight:900;
}
body.voicePage .voiceOptionGrid small{
color:#a1755c;
font-size:7px;
font-weight:850;
letter-spacing:.10em;
}
body.voicePage .voiceOptionGrid strong{
display:block;
margin-top:3px;
color:#5f4e44;
font-size:13px;
}
body.voicePage .voiceOptionGrid p{
margin:
4px 0 0;
color:#9795a5;
font-size:9px;
}
body.voicePage .voiceOptionGrid b{
color:#79543e;
font-size:12px;
white-space:nowrap;
}
body.voicePage .voiceOptionNote{
margin:
16px auto 0;
color:#9795a5;
font-size:9px;
text-align:center;
}
/* ======================================================
PORTING
====================================================== */
body.voicePage .voicePortSection{
padding:
72px 0;
background:#fff;
}
body.voicePage .voicePortPanel{
max-width:1050px;
margin:auto;
padding:
31px;
display:grid;
grid-template-columns:
minmax(0,.85fr)
minmax(0,1.15fr);
gap:32px;
border-radius:29px;
border:
1px solid rgba(102,89,165,.13);
background:
radial-gradient(
circle at 85% 20%,
rgba(229,156,94,.16),
transparent 29%
),
linear-gradient(
140deg,
#fbfafe,
#faeee4
);
box-shadow:
0 18px 39px rgba(113,73,49,.07);
}
body.voicePage .voicePortCopy h2{
margin:
0 0 14px;
color:#59483e;
font-size:
clamp(31px,4vw,49px);
line-height:1.02;
letter-spacing:-.045em;
}
body.voicePage .voicePortCopy > p:last-child{
color:#858497;
font-size:13px;
line-height:1.65;
}
body.voicePage .voicePortSteps{
display:grid;
gap:10px;
}
body.voicePage .voicePortSteps article{
padding:13px;
display:flex;
align-items:center;
gap:12px;
border-radius:17px;
background:
rgba(255,255,255,.78);
border:
1px solid rgba(172,104,59,.09);
}
body.voicePage .voicePortSteps article > span{
flex:
0 0 33px;
width:33px;
height:33px;
display:grid;
place-items:center;
border-radius:11px;
color:#a76840;
background:#f8e9dc;
font-size:9px;
font-weight:900;
}
body.voicePage .voicePortSteps strong{
color:#5f4d43;
font-size:11px;
}
body.voicePage .voicePortSteps p{
margin:
3px 0 0;
color:#9693a3;
font-size:9px;
}
/* ======================================================
DEVICES
====================================================== */
body.voicePage .voiceDeviceSection{
padding:
22px 0 68px;
background:#fff;
}
body.voicePage .voiceDeviceStrip{
max-width:920px;
margin:auto;
padding:
23px 25px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
border-radius:24px;
border:
1px solid rgba(172,104,59,.12);
background:
linear-gradient(
145deg,
#fff,
#fdf6f0
);
box-shadow:
0 14px 30px rgba(69,60,113,.05);
}
body.voicePage .voiceDeviceStrip h3{
margin:
0 0 7px;
color:#5a493f;
font-size:25px;
letter-spacing:-.035em;
}
body.voicePage .voiceDeviceStrip > div:first-child > p:last-child{
max-width:570px;
margin:0;
color:#888799;
font-size:11px;
line-height:1.55;
}
body.voicePage .voiceDevicePills{
flex:
0 0 auto;
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:6px;
max-width:250px;
}
body.voicePage .voiceDevicePills span{
padding:
7px 10px;
border-radius:999px;
color:#936347;
background:#f8eadd;
font-size:8px;
font-weight:800;
}
/* ======================================================
FAQ
====================================================== */
body.voicePage .voiceFaqSection{
padding:
72px 0 82px;
background:
linear-gradient(
180deg,
#fdf6f0,
#fbf1e8
);
}
body.voicePage .voiceFaqList{
max-width:920px;
margin:auto;
display:grid;
gap:9px;
}
body.voicePage .voiceFaqList details{
overflow:hidden;
border-radius:18px;
border:
1px solid rgba(171,103,60,.11);
background:
rgba(255,255,255,.91);
transition:
background .22s ease,
border-color .22s ease,
box-shadow .22s ease;
}
body.voicePage .voiceFaqList details:hover,
body.voicePage .voiceFaqList details[open]{
border-color:
rgba(184,111,63,.20);
background:
linear-gradient(
100deg,
#fff,
#f8e9dc
);
box-shadow:
0 11px 25px rgba(112,72,48,.06);
}
body.voicePage .voiceFaqList summary{
min-height:62px;
padding:
0 15px 0 18px;
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
cursor:pointer;
list-style:none;
color:#5d4d43;
font-size:12px;
font-weight:780;
}
body.voicePage .voiceFaqList summary::-webkit-details-marker{
display:none;
}
body.voicePage .voiceFaqList summary span{
flex:
0 0 31px;
width:31px;
height:31px;
display:grid;
place-items:center;
border-radius:10px;
color:#a6643c;
background:#f8e9dc;
font-size:15px;
transition:
transform .20s ease;
}
body.voicePage .voiceFaqList details[open] summary span{
transform:
rotate(45deg);
}
body.voicePage .voiceFaqList details > div{
padding:
0 56px 18px 18px;
color:#858597;
font-size:11px;
line-height:1.65;
}
/* ======================================================
LEGAL
====================================================== */
body.voicePage .voiceLegalSection{
padding:
48px 0 54px;
background:
linear-gradient(
180deg,
#fbf1e8,
#fff
);
}
body.voicePage .voiceLegalCard{
max-width:540px;
margin:auto;
overflow:hidden;
border-radius:18px;
border:
1px solid rgba(175,106,62,.14);
background:
linear-gradient(
120deg,
#fff,
#fbf1e8
);
box-shadow:
0 13px 28px rgba(106,69,47,.055);
}
body.voicePage .voiceLegalCard summary{
min-height:64px;
padding:
0 15px 0 17px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
cursor:pointer;
list-style:none;
}
body.voicePage .voiceLegalCard summary::-webkit-details-marker{
display:none;
}
body.voicePage .voiceLegalCard summary span{
color:#5d4c42;
font-size:16px;
font-weight:760;
white-space:nowrap;
}
body.voicePage .voiceLegalCard summary b{
flex:
0 0 35px;
width:35px;
height:35px;
display:grid;
place-items:center;
border-radius:50%;
color:#a6643c;
background:#f7e4d3;
font-size:17px;
transition:
transform .20s ease;
}
body.voicePage .voiceLegalCard[open] summary b{
transform:
rotate(45deg);
}
body.voicePage .voiceLegalContent{
padding:
0 17px 18px;
}
body.voicePage .voiceLegalContent p{
color:#888799;
font-size:10px;
line-height:1.6;
}
body.voicePage .voiceLegalContent > div{
display:flex;
flex-wrap:wrap;
gap:7px;
}
body.voicePage .voiceLegalContent a,
body.voicePage .voiceLegalContent > div span{
min-height:38px;
padding:
0 12px;
display:inline-flex;
align-items:center;
border-radius:999px;
font-size:9px;
}
body.voicePage .voiceLegalContent a{
color:#98613f;
border:
1px solid rgba(102,90,163,.14);
background:#fff;
}
body.voicePage .voiceLegalContent > div span{
color:#9290a0;
background:#faf0e7;
}
/* VOICE_SIGNAL_COPPER_V2_START */
/* aktive Verbindung */
body.voicePage .voiceCallStatus i{
background:#d9874a;
box-shadow:
0 0 0 5px rgba(217,135,74,.11),
0 0 22px rgba(217,135,74,.28);
}
/* Call-Kreis mit Signal-Glow */
body.voicePage .voiceCallRing{
border:
1px solid rgba(194,117,64,.16);
background:
radial-gradient(
circle,
rgba(235,164,102,.23) 0%,
rgba(226,144,80,.11) 40%,
rgba(255,249,244,.68) 67%,
transparent 70%
);
box-shadow:
0 0 58px rgba(209,125,66,.17);
}
/* Cockpit etwas wärmer */
body.voicePage .voiceHeroCockpit{
border-color:
rgba(185,112,65,.18);
background:
radial-gradient(
circle at 78% 15%,
rgba(236,173,115,.23),
transparent 30%
),
radial-gradient(
circle at 17% 82%,
rgba(174,101,55,.09),
transparent 29%
),
linear-gradient(
145deg,
rgba(255,253,251,.96),
rgba(250,238,227,.91)
);
box-shadow:
0 28px 76px rgba(111,71,46,.13),
0 0 56px rgba(218,137,74,.08),
inset 0 1px 0 rgba(255,255,255,.98);
}
/* Hover des kompletten Cockpits */
body.voicePage .voiceHeroCockpit{
transition:
border-color .28s ease,
box-shadow .28s ease,
transform .28s ease;
}
body.voicePage .voiceHeroCockpit:hover{
transform:
translateY(-3px);
border-color:
rgba(198,121,67,.29);
box-shadow:
0 34px 82px rgba(112,70,44,.15),
0 0 72px rgba(221,142,79,.13),
inset 0 1px 0 rgba(255,255,255,.98);
}
/* Floating Cards ebenfalls warm */
body.voicePage .voiceFloatCard{
border-color:
rgba(185,111,63,.15);
background:
linear-gradient(
145deg,
rgba(255,255,255,.94),
rgba(253,246,239,.92)
);
box-shadow:
0 13px 30px rgba(113,71,47,.08);
}
body.voicePage .voiceFloatIcon{
color:#a7653d;
background:
linear-gradient(
145deg,
#f8e8da,
#fff8f2
);
}
/* Section Cards Hover */
body.voicePage .voiceSolutionCard,
body.voicePage .voiceMinuteGridV2 article,
body.voicePage .voiceOptionGrid article,
body.voicePage .voicePortSteps article{
transition:
transform .24s ease,
border-color .24s ease,
background .24s ease,
box-shadow .24s ease;
}
body.voicePage .voiceSolutionCard:hover,
body.voicePage .voiceMinuteGridV2 article:hover,
body.voicePage .voiceOptionGrid article:hover{
transform:
translateY(-3px);
border-color:
rgba(191,116,66,.22);
box-shadow:
0 18px 36px rgba(117,73,48,.09);
background:
linear-gradient(
145deg,
#ffffff,
#fcf1e7
);
}
/* FAQ warmer Hover */
body.voicePage .voiceFaqList details:hover,
body.voicePage .voiceFaqList details[open]{
border-color:
rgba(190,115,65,.20);
background:
linear-gradient(
100deg,
#ffffff,
#faeadc
);
box-shadow:
0 11px 25px rgba(113,72,48,.06);
}
/* Legal Hover */
body.voicePage .voiceLegalCard{
transition:
border-color .25s ease,
box-shadow .25s ease,
background .25s ease;
}
body.voicePage .voiceLegalCard:hover{
border-color:
rgba(191,116,66,.23);
background:
linear-gradient(
120deg,
#ffffff,
#faeadc
);
box-shadow:
0 16px 31px rgba(113,72,48,.08);
}
/* VOICE_SIGNAL_COPPER_V2_END */
/* VOICE_REDESIGN_V1_END */
/* INTERNET_FIBER_REAL_V3_START */
/* ======================================================
INTERNET COLOR SYSTEM
Fiber · Netzwerk · Datenfluss
====================================================== */
body.internetPage{
--internet-deep:#0f4c81;
--internet-main:#1677b8;
--internet-signal:#27a6d5;
--internet-cyan:#65d3ee;
--internet-soft:#dff4fb;
--internet-bg:#f5fbfe;
}
/* ======================================================
HERO
====================================================== */
body.internetPage .internetHeroV1{
background:
radial-gradient(
circle at 85% 17%,
rgba(64,184,226,.20),
transparent 31%
),
radial-gradient(
circle at 62% 76%,
rgba(22,119,184,.08),
transparent 28%
),
linear-gradient(
135deg,
#ffffff 0%,
#f8fdff 50%,
#eaf8fd 100%
) !important;
}
body.internetPage
.internetHeroV1Copy h1{
background:
linear-gradient(
100deg,
#0f4c81 0%,
#1677b8 40%,
#27a6d5 72%,
#65d3ee 100%
) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color:transparent !important;
color:transparent !important;
}
/* ======================================================
TV OPTION V4 – DER FEHLER AUS DEM SCREENSHOT
====================================================== */
body.internetPage
.internetTvOptionsV4{
padding:
34px 0 72px !important;
background:
linear-gradient(
180deg,
#ffffff 0%,
#f6fcfe 100%
) !important;
}
body.internetPage
.internetTvOptionsBanner{
width:min(
100%,
1080px
) !important;
min-height:260px !important;
margin:
0 auto !important;
padding:
28px !important;
display:grid !important;
grid-template-columns:
230px
minmax(0,1fr)
auto !important;
align-items:center !important;
gap:30px !important;
overflow:hidden !important;
border-radius:
28px !important;
border:
1px solid rgba(38,159,209,.16) !important;
background:
radial-gradient(
circle at 14% 50%,
rgba(90,211,238,.15),
transparent 32%
),
linear-gradient(
145deg,
#ffffff,
#edf9fd
) !important;
box-shadow:
0 18px 42px rgba(18,108,156,.07) !important;
}
/* Visual wieder sichtbar */
body.internetPage
.internetTvOptionsVisual{
position:relative !important;
width:210px !important;
height:170px !important;
display:block !important;
flex:none !important;
opacity:1 !important;
visibility:visible !important;
transform:none !important;
}
/* TV Screen */
body.internetPage
.internetTvScreenV4{
position:absolute !important;
left:8px !important;
top:10px !important;
width:172px !important;
height:108px !important;
display:grid !important;
place-items:center !important;
border-radius:
19px !important;
border:
1px solid rgba(38,156,208,.18) !important;
background:
radial-gradient(
circle at 65% 32%,
rgba(96,215,239,.32),
transparent 38%
),
linear-gradient(
145deg,
#eaf8fd,
#d9f2fa
) !important;
box-shadow:
0 13px 30px rgba(17,113,164,.10) !important;
}
body.internetPage
.internetTvScreenV4 span{
color:#1677b8 !important;
font-size:10px !important;
font-weight:850 !important;
letter-spacing:.12em !important;
}
body.internetPage
.internetTvScreenV4 strong{
color:#0f4c81 !important;
font-size:34px !important;
line-height:1 !important;
}
/* kleine TV-Box */
body.internetPage
.internetTvBoxV4{
position:absolute !important;
right:8px !important;
bottom:14px !important;
width:82px !important;
height:43px !important;
border-radius:
13px !important;
border:
1px solid rgba(26,141,193,.17) !important;
background:
linear-gradient(
145deg,
#ffffff,
#dff4fb
) !important;
box-shadow:
0 9px 21px rgba(17,102,150,.10) !important;
}
/* Signal-Punkte */
body.internetPage
.internetTvSignal{
position:absolute !important;
display:block !important;
border-radius:50% !important;
background:#27a6d5 !important;
box-shadow:
0 0 0 5px rgba(39,166,213,.09),
0 0 18px rgba(39,166,213,.22) !important;
}
body.internetPage
.internetTvSignal.signalOne{
width:7px !important;
height:7px !important;
left:28px !important;
bottom:22px !important;
}
body.internetPage
.internetTvSignal.signalTwo{
width:5px !important;
height:5px !important;
left:53px !important;
bottom:32px !important;
opacity:.72 !important;
}
body.internetPage
.internetTvSignal.signalThree{
width:4px !important;
height:4px !important;
left:73px !important;
bottom:46px !important;
opacity:.45 !important;
}
/* Copy */
body.internetPage
.internetTvOptionsCopy{
min-width:0 !important;
}
body.internetPage
.internetTvOptionsCopy .k{
margin:
0 0 7px !important;
color:#159ac8 !important;
-webkit-text-fill-color:#159ac8 !important;
font-size:10px !important;
font-weight:850 !important;
letter-spacing:.14em !important;
text-transform:uppercase !important;
}
body.internetPage
.internetTvOptionsCopy h3{
margin:
0 0 11px !important;
color:#174b6d !important;
font-size:
clamp(27px,3vw,38px) !important;
line-height:1.05 !important;
letter-spacing:-.038em !important;
}
body.internetPage
.internetTvOptionsCopy > p{
max-width:610px !important;
margin:
0 0 16px !important;
color:#6f8797 !important;
font-size:13px !important;
line-height:1.6 !important;
}
/* Pills – Screenshot aktuell kaputt / inline Text */
body.internetPage
.internetTvOptionPills{
display:flex !important;
flex-wrap:wrap !important;
gap:8px !important;
margin-top:13px !important;
}
body.internetPage
.internetTvOptionPills > *{
min-height:34px !important;
padding:
0 11px !important;
display:inline-flex !important;
align-items:center !important;
border-radius:999px !important;
border:
1px solid rgba(35,152,202,.13) !important;
background:
rgba(255,255,255,.78) !important;
color:#456c83 !important;
font-size:10px !important;
line-height:1.2 !important;
white-space:nowrap !important;
}
body.internetPage
.internetTvOptionPills strong{
margin-right:4px !important;
color:#155d86 !important;
}
/* Actions */
body.internetPage
.internetTvOptionsActions{
min-width:180px !important;
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
gap:9px !important;
}
body.internetPage
.internetTvPrimaryAction,
body.internetPage
.internetTvSecondaryAction{
min-height:45px !important;
padding:
0 15px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:14px !important;
font-size:11px !important;
font-weight:800 !important;
white-space:nowrap !important;
}
body.internetPage
.internetTvPrimaryAction{
color:#fff !important;
background:
linear-gradient(
135deg,
#1677b8,
#27a6d5
) !important;
border:
1px solid rgba(21,119,183,.18) !important;
box-shadow:
0 11px 24px rgba(20,116,171,.16) !important;
}
body.internetPage
.internetTvSecondaryAction{
color:#176c9b !important;
background:
rgba(255,255,255,.80) !important;
border:
1px solid rgba(28,147,198,.15) !important;
}
/* ======================================================
FAQ V3 – echte Klassen
====================================================== */
body.internetPage
.internetFaqV3{
padding:
68px 0 78px !important;
background:
radial-gradient(
circle at 88% 15%,
rgba(87,202,233,.10),
transparent 27%
),
linear-gradient(
180deg,
#ffffff,
#f3fbfe
) !important;
}
body.internetPage
.internetFaqV3Head{
max-width:900px !important;
margin:
0 auto 28px !important;
text-align:center !important;
}
body.internetPage
.internetFaqV3Head .k{
margin-bottom:10px !important;
color:#159ac8 !important;
-webkit-text-fill-color:#159ac8 !important;
text-align:center !important;
}
body.internetPage
.internetFaqV3Head h2{
margin:
0 auto 10px !important;
color:#173f5e !important;
font-size:
clamp(36px,4.7vw,58px) !important;
line-height:1.02 !important;
letter-spacing:-.045em !important;
text-align:center !important;
}
body.internetPage
.internetFaqV3Head > p:last-child{
margin:
0 auto !important;
color:#7890a0 !important;
text-align:center !important;
}
body.internetPage
.internetFaqV3List{
max-width:920px !important;
margin:
0 auto !important;
display:grid !important;
gap:9px !important;
}
body.internetPage
.internetFaqV3List details{
overflow:hidden !important;
border-radius:
18px !important;
border:
1px solid rgba(32,145,194,.12) !important;
background:
rgba(255,255,255,.91) !important;
box-shadow:none !important;
transition:
transform .22s ease,
border-color .22s ease,
background .22s ease,
box-shadow .22s ease !important;
}
body.internetPage
.internetFaqV3List details:hover,
body.internetPage
.internetFaqV3List details[open]{
transform:
translateY(-1px) !important;
border-color:
rgba(32,157,209,.24) !important;
background:
linear-gradient(
100deg,
#ffffff,
#eaf8fd
) !important;
box-shadow:
0 11px 25px rgba(18,105,154,.065) !important;
}
body.internetPage
.internetFaqV3List summary{
min-height:62px !important;
padding:
0 15px 0 18px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:14px !important;
list-style:none !important;
cursor:pointer !important;
}
body.internetPage
.internetFaqV3List summary::-webkit-details-marker{
display:none !important;
}
body.internetPage
.internetFaqV3List summary > span{
color:#2b526d !important;
font-size:12px !important;
font-weight:780 !important;
}
body.internetPage
.internetFaqV3List summary > i{
flex:
0 0 31px !important;
width:31px !important;
height:31px !important;
display:grid !important;
place-items:center !important;
border-radius:
10px !important;
background:
#e7f7fc !important;
color:#178dbd !important;
font-style:normal !important;
font-size:15px !important;
font-weight:850 !important;
transition:
transform .20s ease !important;
}
body.internetPage
.internetFaqV3List details[open]
summary > i{
transform:
rotate(45deg) !important;
}
body.internetPage
.internetFaqV3List details > p{
max-width:820px !important;
margin:0 !important;
padding:
0 54px 17px 18px !important;
color:#728a99 !important;
font-size:11px !important;
line-height:1.65 !important;
}
/* INTERNET_FIBER_REAL_V3_END */
/* INTERNET_CENTER_LEGAL_V5_START */
/* ======================================================
TV-ZUSATZOPTION AUF INTERNET – SAUBER MITTIG
====================================================== */
body.internetPage .internetTvOptionsV4{
padding:
64px 0 74px !important;
}
body.internetPage .internetTvOptionsV4 > .shell{
width:min(
1240px,
calc(100% - 40px)
) !important;
margin:
0 auto !important;
}
body.internetPage .internetTvOptionsBanner{
width:min(
100%,
1080px
) !important;
margin:
0 auto !important;
}
body.internetPage .internetTvOptionsCopy{
min-width:0 !important;
}
body.internetPage .internetTvOptionsCopy .k{
text-align:center !important;
}
body.internetPage .internetTvOptionsCopy h3{
text-align:center !important;
margin-left:auto !important;
margin-right:auto !important;
}
body.internetPage .internetTvOptionsCopy > p{
text-align:center !important;
margin-left:auto !important;
margin-right:auto !important;
}
body.internetPage .internetTvOptionPills{
justify-content:center !important;
margin-left:auto !important;
margin-right:auto !important;
}
body.internetPage .internetTvOptionsActions{
align-items:center !important;
justify-content:center !important;
}
/* Falls das Banner aktuell dreispaltig ist:
Visual links / Copy Mitte / Buttons rechts bleiben erhalten,
aber die gesamte Komposition wird sauber zentriert. */
body.internetPage .internetTvOptionsBanner{
grid-template-columns:
220px
minmax(0,1fr)
180px !important;
align-items:center !important;
justify-content:center !important;
}
body.internetPage .internetTvOptionsVisual{
justify-self:center !important;
}
body.internetPage .internetTvOptionsCopy{
justify-self:center !important;
width:100% !important;
}
body.internetPage .internetTvOptionsActions{
justify-self:center !important;
width:100% !important;
}
/* ======================================================
INTERNET LEGAL – KLEIN UND DEZENT
====================================================== */
body.internetPage .internetLegalV5{
padding:
34px 0 38px !important;
background:
linear-gradient(
180deg,
#f7fcfe,
#ffffff
) !important;
}
body.internetPage .internetLegalV5 .shell{
width:min(
560px,
calc(100% - 36px)
) !important;
margin:
0 auto !important;
}
body.internetPage .internetLegalCardV5{
width:100% !important;
margin:
0 auto !important;
overflow:hidden !important;
border-radius:
17px !important;
border:
1px solid rgba(31,148,198,.14) !important;
background:
linear-gradient(
130deg,
#ffffff,
#eef9fd
) !important;
box-shadow:
0 10px 24px rgba(18,105,154,.05) !important;
transition:
border-color .22s ease,
box-shadow .22s ease,
background .22s ease !important;
}
body.internetPage .internetLegalCardV5:hover{
border-color:
rgba(31,157,209,.24) !important;
background:
linear-gradient(
130deg,
#ffffff,
#e7f7fc
) !important;
box-shadow:
0 14px 28px rgba(18,105,154,.075) !important;
}
body.internetPage .internetLegalCardV5 summary{
min-height:
56px !important;
padding:
0 13px 0 16px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:12px !important;
list-style:none !important;
cursor:pointer !important;
}
body.internetPage
.internetLegalCardV5 summary::-webkit-details-marker{
display:none !important;
}
body.internetPage .internetLegalTitleV5{
color:
#27536f !important;
font-size:
15px !important;
font-weight:
760 !important;
line-height:
1.1 !important;
letter-spacing:
-.02em !important;
white-space:
nowrap !important;
}
body.internetPage .internetLegalPlusV5{
flex:
0 0 32px !important;
width:
32px !important;
height:
32px !important;
display:grid !important;
place-items:center !important;
border-radius:
50% !important;
color:
#168fbd !important;
background:
#e4f6fc !important;
font-size:
15px !important;
font-weight:
850 !important;
transition:
transform .20s ease !important;
}
body.internetPage
.internetLegalCardV5[open]
.internetLegalPlusV5{
transform:
rotate(45deg) !important;
}
body.internetPage .internetLegalContentV5{
padding:
0 16px 16px !important;
}
body.internetPage .internetLegalContentV5 p{
margin:
0 0 11px !important;
color:
#7890a0 !important;
font-size:
10px !important;
line-height:
1.55 !important;
}
body.internetPage .internetLegalActionsV5{
display:flex !important;
flex-wrap:wrap !important;
gap:
7px !important;
}
body.internetPage .internetLegalActionsV5 a,
body.internetPage .internetLegalActionsV5 span{
min-height:
34px !important;
padding:
0 11px !important;
display:inline-flex !important;
align-items:center !important;
border-radius:
999px !important;
font-size:
9px !important;
}
body.internetPage .internetLegalActionsV5 a{
color:
#176f9d !important;
border:
1px solid rgba(30,145,195,.14) !important;
background:
#ffffff !important;
}
body.internetPage .internetLegalActionsV5 span{
color:
#8297a4 !important;
background:
#eff9fc !important;
}
/* INTERNET_CENTER_LEGAL_V5_END */
/* INTERNET_TV_CENTER_V7_START */
/* ======================================================
INTERNET → TV TARIFE
Wichtig:
#tvTariffGrid ist im statischen HTML leer.
Die drei Produktkarten werden per JS eingefügt.
Deshalb direkt den echten Grid-Container stylen.
====================================================== */
/* gesamte Section */
body.internetPage #tv-kombi{
padding:
70px 0 76px !important;
}
/* Shell */
body.internetPage #tv-kombi > .shell{
width:min(
1240px,
calc(100% - 40px)
) !important;
margin-left:auto !important;
margin-right:auto !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
}
/* Überschrift exakt zentriert */
body.internetPage
#tv-kombi
> .shell
> .center{
width:100% !important;
max-width:950px !important;
margin:
0 auto 28px !important;
text-align:center !important;
}
body.internetPage
#tv-kombi
> .shell
> .center
> *{
margin-left:auto !important;
margin-right:auto !important;
text-align:center !important;
}
/* TV Small Title */
body.internetPage
#tv-kombi
.center
.k{
width:100% !important;
text-align:center !important;
}
/* Privat / Business Switch */
body.internetPage
#tv-kombi
.audienceToggle{
width:max-content !important;
max-width:100% !important;
margin:
0 auto 30px !important;
align-self:center !important;
justify-self:center !important;
}
/* ======================================================
DER ENTSCHEIDENDE FIX
====================================================== */
body.internetPage
#tv-kombi
#tvTariffGrid{
box-sizing:border-box !important;
width:min(
100%,
1000px
) !important;
max-width:1000px !important;
margin:
0 auto !important;
padding:
0 !important;
display:grid !important;
grid-template-columns:
repeat(
3,
minmax(0,300px)
) !important;
justify-content:center !important;
justify-items:stretch !important;
align-items:stretch !important;
gap:
18px !important;
align-self:center !important;
overflow:visible !important;
}
/* dynamisch eingefügte Tarifkarten */
body.internetPage
#tv-kombi
#tvTariffGrid
> *{
box-sizing:border-box !important;
width:100% !important;
max-width:300px !important;
min-width:0 !important;
margin:
0 !important;
justify-self:center !important;
}
/* Generic edge-scroll Verhalten auf Desktop neutralisieren */
body.internetPage
#tv-kombi
#tvTariffGrid.edgeScrollGrid{
overflow:visible !important;
scroll-snap-type:none !important;
scroll-padding:0 !important;
}
/* Falls eine alte globale .tariffGrid-Regel
width/max-width/margin überschreibt */
body.internetPage
#tv-kombi
.tariffGrid.tvTariffGrid{
width:min(100%,1000px) !important;
max-width:1000px !important;
margin-left:auto !important;
margin-right:auto !important;
justify-content:center !important;
}
/* INTERNET_TV_CENTER_V7_END */
/* INTERNET_TV_SWITCH_CENTER_V8_START */
/*
#tv-kombi ist bereits korrekt zentriert.
Nur .audienceToggle wurde noch durch ältere globale
Layoutregeln nach rechts geschoben.
*/
body.internetPage
#tv-kombi
> .shell
> .audienceToggle{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
float:none !important;
transform:none !important;
display:flex !important;
align-self:center !important;
justify-self:center !important;
width:max-content !important;
max-width:100% !important;
margin:
0 auto 30px !important;
}
/* Sicherheit gegen globale Regeln auf dem TV-Toggle */
body.internetPage
#tv-kombi
.audienceToggle[data-target="tvTariffGrid"]{
margin-left:auto !important;
margin-right:auto !important;
align-self:center !important;
justify-content:center !important;
}
/* INTERNET_TV_SWITCH_CENTER_V8_END */
/* INTERNET_AURORA_V10_START */
/* ======================================================
INTERNET AURORA COLOR SYSTEM
====================================================== */
body.internetPage{
--inet-navy:#174b73;
--inet-blue:#2d8fd0;
--inet-cyan:#58c9eb;
--inet-sky:#91dcf4;
--inet-peri:#8d9cf4;
--inet-lilac:#b5adf7;
--inet-mint:#a9ead9;
--inet-ice:#eefaff;
}
/* ======================================================
HERO – MEHR TIEFE
====================================================== */
body.internetPage .internetHeroV1{
position:relative !important;
overflow:hidden !important;
background:
radial-gradient(
circle at 88% 14%,
rgba(81,200,235,.32),
transparent 32%
),
radial-gradient(
circle at 70% 74%,
rgba(137,157,244,.18),
transparent 31%
),
radial-gradient(
circle at 20% 75%,
rgba(157,231,217,.15),
transparent 29%
),
linear-gradient(
135deg,
#ffffff 0%,
#f2fbff 48%,
#e4f6fc 100%
) !important;
}
body.internetPage .internetHeroV1::before{
content:"" !important;
position:absolute !important;
width:420px !important;
height:420px !important;
right:-100px !important;
top:-130px !important;
border-radius:50% !important;
background:
radial-gradient(
circle,
rgba(100,211,239,.23),
rgba(135,157,242,.10) 52%,
transparent 70%
) !important;
filter:blur(4px) !important;
pointer-events:none !important;
animation:
inetHeroGlow 9s ease-in-out infinite alternate !important;
}
/* ======================================================
VERFÜGBARKEIT
====================================================== */
body.internetPage .internetSpeedCheckV3{
background:
linear-gradient(
180deg,
#eef9fd 0%,
#f6fbfe 100%
) !important;
}
body.internetPage .internetSpeedCheckBar{
border-color:
rgba(74,177,219,.22) !important;
background:
linear-gradient(
110deg,
rgba(255,255,255,.94),
rgba(230,247,253,.94)
) !important;
box-shadow:
0 16px 36px rgba(46,132,177,.08),
0 0 34px rgba(81,196,230,.06) !important;
transition:
transform .28s ease,
box-shadow .28s ease,
border-color .28s ease !important;
}
body.internetPage .internetSpeedCheckBar:hover{
transform:
translateY(-3px) !important;
border-color:
rgba(66,175,218,.36) !important;
box-shadow:
0 22px 44px rgba(42,127,172,.12),
0 0 44px rgba(83,200,232,.11) !important;
}
/* ======================================================
INTERNET TARIFE
====================================================== */
body.internetPage #internetTariffGrid{
position:relative !important;
}
body.internetPage #internetTariffGrid .tariffCard{
overflow:hidden !important;
border:
1px solid rgba(64,166,215,.24) !important;
background:
radial-gradient(
circle at 90% 5%,
rgba(113,215,239,.12),
transparent 28%
),
linear-gradient(
150deg,
#ffffff 0%,
#f5fbff 72%,
#eef9fd 100%
) !important;
box-shadow:
0 15px 34px rgba(35,115,159,.075) !important;
transition:
transform .30s cubic-bezier(.22,.8,.3,1),
box-shadow .30s ease,
border-color .30s ease !important;
}
body.internetPage
#internetTariffGrid
.tariffCard:nth-child(2n){
background:
radial-gradient(
circle at 90% 8%,
rgba(146,157,244,.13),
transparent 27%
),
linear-gradient(
150deg,
#ffffff,
#f6f7ff
) !important;
}
body.internetPage
#internetTariffGrid
.tariffCard:nth-child(3n){
background:
radial-gradient(
circle at 90% 8%,
rgba(143,230,210,.15),
transparent 27%
),
linear-gradient(
150deg,
#ffffff,
#f2fcf9
) !important;
}
body.internetPage
#internetTariffGrid
.tariffCard:hover{
transform:
translateY(-7px) scale(1.012) !important;
border-color:
rgba(69,176,220,.44) !important;
box-shadow:
0 25px 52px rgba(41,121,164,.14),
0 0 32px rgba(82,194,228,.08) !important;
}
body.internetPage
#internetTariffGrid
.tariffCard.featured{
border-color:
rgba(73,187,229,.56) !important;
background:
radial-gradient(
circle at 88% 4%,
rgba(139,151,246,.20),
transparent 31%
),
radial-gradient(
circle at 10% 95%,
rgba(92,212,236,.11),
transparent 28%
),
linear-gradient(
145deg,
#ffffff,
#eef9ff
) !important;
box-shadow:
0 22px 48px rgba(50,139,188,.14) !important;
}
/* Buttons */
body.internetPage
#internetTariffGrid
.tariffAdd{
border:
1px solid rgba(65,169,218,.34) !important;
background:
linear-gradient(
110deg,
#e3f7fd 0%,
#dff4ff 42%,
#eaefff 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.90) !important;
transition:
transform .24s ease,
box-shadow .24s ease,
background .24s ease !important;
}
body.internetPage
#internetTariffGrid
.tariffAdd:hover{
transform:
translateY(-2px) !important;
background:
linear-gradient(
110deg,
#cceffc,
#d5edff 48%,
#dddfff
) !important;
box-shadow:
0 11px 22px rgba(59,153,202,.15) !important;
}
/* ======================================================
HARDWARE BANNER – MINT/AQUA
====================================================== */
body.internetPage .internetBoxStripV3{
background:
linear-gradient(
180deg,
#ffffff,
#f4fcfa
) !important;
}
body.internetPage
.internetDeviceBannerInternet{
border-color:
rgba(94,199,180,.26) !important;
background:
radial-gradient(
circle at 12% 50%,
rgba(157,234,216,.21),
transparent 28%
),
linear-gradient(
110deg,
#ffffff,
#effbf8
) !important;
box-shadow:
0 16px 36px rgba(54,133,119,.075) !important;
transition:
transform .28s ease,
box-shadow .28s ease !important;
}
body.internetPage
.internetDeviceBannerInternet:hover{
transform:
translateY(-3px) !important;
box-shadow:
0 22px 44px rgba(52,134,119,.12) !important;
}
/* ======================================================
TV KOMBI – SICHTBARER SKY / PERIWINKLE BEREICH
====================================================== */
body.internetPage #tv-kombi{
position:relative !important;
overflow:hidden !important;
background:
radial-gradient(
circle at 12% 18%,
rgba(82,205,235,.23),
transparent 31%
),
radial-gradient(
circle at 88% 22%,
rgba(151,142,246,.25),
transparent 32%
),
radial-gradient(
circle at 52% 88%,
rgba(158,232,214,.14),
transparent 36%
),
linear-gradient(
180deg,
#f4fbff 0%,
#edf7fd 50%,
#f5f7ff 100%
) !important;
}
body.internetPage
#tv-kombi
> .shell{
position:relative !important;
z-index:2 !important;
}
/* Titel */
body.internetPage
#tv-kombi
.center
.k{
color:#278fbe !important;
-webkit-text-fill-color:#278fbe !important;
}
body.internetPage
#tv-kombi
.center
h2{
background:
linear-gradient(
95deg,
#235d91 0%,
#438fd2 30%,
#747fe9 65%,
#9a83ef 100%
) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color:transparent !important;
color:transparent !important;
}
/* Switch – echte bewegliche ::before Pill */
body.internetPage
#tv-kombi
.audienceToggle{
border:
1px solid rgba(111,174,223,.25) !important;
background:
rgba(231,244,252,.91) !important;
box-shadow:
0 13px 28px rgba(79,139,181,.12) !important;
backdrop-filter:
blur(12px) !important;
}
body.internetPage
#tv-kombi
.audienceToggle::before{
background:
linear-gradient(
135deg,
#55c7eb 0%,
#6fb6ef 46%,
#908df0 100%
) !important;
box-shadow:
0 10px 25px rgba(93,146,219,.31),
0 0 22px rgba(124,139,238,.15) !important;
}
/* TV-Karten */
body.internetPage
#tv-kombi
#tvTariffGrid
.tariffCard{
position:relative !important;
overflow:hidden !important;
border:
1px solid rgba(104,169,222,.28) !important;
background:
radial-gradient(
circle at 88% 7%,
rgba(142,153,245,.17),
transparent 29%
),
linear-gradient(
145deg,
rgba(255,255,255,.98),
rgba(242,249,255,.96)
) !important;
box-shadow:
0 18px 40px rgba(69,119,158,.10) !important;
transition:
transform .32s cubic-bezier(.2,.8,.3,1),
border-color .32s ease,
box-shadow .32s ease !important;
}
body.internetPage
#tv-kombi
#tvTariffGrid
.tariffCard:nth-child(1){
background:
radial-gradient(
circle at 88% 6%,
rgba(82,204,234,.17),
transparent 30%
),
linear-gradient(
145deg,
#ffffff,
#effaff
) !important;
}
body.internetPage
#tv-kombi
#tvTariffGrid
.tariffCard:nth-child(2){
background:
radial-gradient(
circle at 88% 5%,
rgba(143,132,242,.22),
transparent 31%
),
linear-gradient(
145deg,
#ffffff,
#f2f3ff
) !important;
}
body.internetPage
#tv-kombi
#tvTariffGrid
.tariffCard:nth-child(3){
background:
radial-gradient(
circle at 88% 6%,
rgba(142,228,210,.20),
transparent 30%
),
linear-gradient(
145deg,
#ffffff,
#f0fcf8
) !important;
}
body.internetPage
#tv-kombi
#tvTariffGrid
.tariffCard:hover{
transform:
translateY(-8px) scale(1.018) !important;
border-color:
rgba(108,149,231,.50) !important;
box-shadow:
0 28px 58px rgba(65,109,158,.17),
0 0 34px rgba(112,155,230,.11) !important;
}
/* Recommendation Badge */
body.internetPage
#tv-kombi
#tvTariffGrid
.tariffCard.featured::after{
filter:
drop-shadow(
0 6px 10px rgba(103,117,224,.18)
) !important;
}
/* Warenkorbbutton – exakt echte Klasse */
body.internetPage
#tv-kombi
#tvTariffGrid
.tariffAdd{
background:
linear-gradient(
115deg,
#dff6fd,
#deefff 48%,
#e8e6ff
) !important;
border:
1px solid rgba(91,169,220,.37) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.88) !important;
transition:
transform .23s ease,
background .23s ease,
box-shadow .23s ease !important;
}
body.internetPage
#tv-kombi
#tvTariffGrid
.tariffAdd:hover{
transform:
translateY(-2px) !important;
background:
linear-gradient(
115deg,
#c8effb,
#cfebff 44%,
#ddd8ff
) !important;
box-shadow:
0 11px 23px rgba(75,142,198,.17) !important;
}
/* ======================================================
TV ZUSATZOPTION – AQUA/MINT
====================================================== */
body.internetPage
.internetTvOptionsV4{
background:
radial-gradient(
circle at 14% 23%,
rgba(132,231,211,.18),
transparent 28%
),
radial-gradient(
circle at 88% 27%,
rgba(91,198,232,.13),
transparent 27%
),
linear-gradient(
180deg,
#f7fdfb,
#edf9f6
) !important;
}
body.internetPage
.internetTvOptionsBanner{
border:
1px solid rgba(100,202,183,.29) !important;
background:
linear-gradient(
110deg,
rgba(255,255,255,.98),
rgba(239,251,247,.97)
) !important;
box-shadow:
0 19px 40px rgba(56,134,120,.09) !important;
transition:
transform .30s ease,
box-shadow .30s ease !important;
}
body.internetPage
.internetTvOptionsBanner:hover{
transform:
translateY(-4px) !important;
box-shadow:
0 27px 52px rgba(53,133,119,.14) !important;
}
body.internetPage
.internetTvOptionsBanner
.internetTvPrimaryAction{
background:
linear-gradient(
135deg,
#75dfbd,
#67d7b7 48%,
#81e8c9
) !important;
color:#174f43 !important;
border:none !important;
box-shadow:
0 12px 26px rgba(71,175,143,.20) !important;
}
/* ======================================================
FAQ – HELLBLAU / PERIWINKLE
====================================================== */
body.internetPage .internetFaqV3{
background:
radial-gradient(
circle at 90% 15%,
rgba(144,156,243,.11),
transparent 27%
),
linear-gradient(
180deg,
#fbfdff,
#eef8fd
) !important;
}
body.internetPage
.internetFaqV3Head
h2{
background:
linear-gradient(
95deg,
#24567d,
#3e8dcc 42%,
#7b86e8 100%
) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color:transparent !important;
color:transparent !important;
}
body.internetPage
.internetFaqV3List
details{
transition:
transform .25s ease,
background .25s ease,
border-color .25s ease,
box-shadow .25s ease !important;
}
body.internetPage
.internetFaqV3List
details:hover,
body.internetPage
.internetFaqV3List
details[open]{
transform:
translateY(-3px) !important;
border-color:
rgba(103,167,217,.31) !important;
background:
linear-gradient(
110deg,
#ffffff,
#edf8fd,
#f3f2ff
) !important;
box-shadow:
0 15px 30px rgba(55,123,162,.09) !important;
}
/* ======================================================
ANIMATIONEN
====================================================== */
@keyframes inetHeroGlow{
0%{
transform:
translate3d(-8px,-3px,0)
scale(.96);
}
100%{
transform:
translate3d(16px,13px,0)
scale(1.08);
}
}
/* INTERNET_AURORA_V10_END */
/* INTERNET_TV_VISUAL_MOTION_V11_START */
/* ======================================================
TV SECTION – KEINE HARTEN / ABGESCHNITTENEN KANTEN
====================================================== */
body.internetPage #tv-kombi{
position:relative !important;
overflow:hidden !important;
isolation:isolate !important;
background:
radial-gradient(
ellipse at 12% 20%,
rgba(79,204,235,.25),
transparent 37%
),
radial-gradient(
ellipse at 88% 23%,
rgba(145,139,244,.24),
transparent 38%
),
radial-gradient(
ellipse at 52% 86%,
rgba(143,229,211,.18),
transparent 42%
),
linear-gradient(
180deg,
#f2fbff 0%,
#edf8fd 48%,
#f5f7ff 100%
) !important;
}
/*
Drei einzelne Glow-Flächen statt einer riesigen
rotierenden Conic-Fläche. Dadurch gibt es keine
sichtbare schräge Schnittkante mehr.
*/
body.internetPage #tv-kombi::before{
content:"" !important;
position:absolute !important;
width:520px !important;
height:520px !important;
left:-150px !important;
top:-170px !important;
border-radius:50% !important;
pointer-events:none !important;
background:
radial-gradient(
circle,
rgba(74,205,238,.27) 0%,
rgba(74,205,238,.10) 48%,
transparent 72%
) !important;
filter:
blur(18px) !important;
animation:
internetTvBlobLeftV11
10s ease-in-out
infinite alternate !important;
}
body.internetPage #tv-kombi::after{
content:"" !important;
position:absolute !important;
width:580px !important;
height:580px !important;
right:-180px !important;
top:-150px !important;
border-radius:50% !important;
pointer-events:none !important;
background:
radial-gradient(
circle,
rgba(145,133,244,.24) 0%,
rgba(145,133,244,.09) 50%,
transparent 72%
) !important;
filter:
blur(20px) !important;
animation:
internetTvBlobRightV11
12s ease-in-out
infinite alternate !important;
}
body.internetPage
#tv-kombi
> .shell{
position:relative !important;
z-index:3 !important;
}
/* ======================================================
ANIMIERTES TV-GERÄT
====================================================== */
body.internetPage .internetTvStageV11{
position:relative !important;
width:
min(100%,520px) !important;
height:
190px !important;
margin:
14px auto 26px !important;
z-index:4 !important;
}
/* weicher Glow hinter TV */
body.internetPage .internetTvGlowV11{
position:absolute !important;
left:50% !important;
top:48% !important;
width:330px !important;
height:160px !important;
transform:
translate(-50%,-50%) !important;
border-radius:50% !important;
background:
radial-gradient(
ellipse,
rgba(90,201,235,.28),
rgba(133,150,243,.12) 48%,
transparent 72%
) !important;
filter:
blur(22px) !important;
animation:
internetTvGlowPulseV11
3.8s ease-in-out infinite !important;
}
/* Bildschirm */
body.internetPage .internetTvScreenStageV11{
position:absolute !important;
left:50% !important;
top:10px !important;
width:270px !important;
height:150px !important;
transform:
translateX(-50%) !important;
overflow:hidden !important;
border-radius:
21px !important;
border:
1px solid rgba(99,173,222,.35) !important;
background:
radial-gradient(
circle at 75% 22%,
rgba(143,135,246,.29),
transparent 33%
),
radial-gradient(
circle at 22% 78%,
rgba(90,214,233,.24),
transparent 34%
),
linear-gradient(
145deg,
#eaf9ff,
#e8efff
) !important;
box-shadow:
0 20px 48px rgba(57,112,155,.18),
0 0 45px rgba(89,189,228,.11),
inset 0 1px 0 rgba(255,255,255,.88) !important;
animation:
internetTvScreenFloatV11
4.5s ease-in-out infinite !important;
}
/* Screen Reflection */
body.internetPage
.internetTvScreenReflectionV11{
position:absolute !important;
width:190px !important;
height:260px !important;
left:-105px !important;
top:-68px !important;
transform:
rotate(27deg) !important;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.48),
transparent
) !important;
animation:
internetTvReflectionV11
6.5s ease-in-out infinite !important;
}
/* TV Logo */
body.internetPage
.internetTvScreenLogoV11{
position:absolute !important;
left:50% !important;
top:50% !important;
transform:
translate(-50%,-50%) !important;
text-align:center !important;
}
body.internetPage
.internetTvScreenLogoV11 span{
display:block !important;
margin-bottom:2px !important;
color:#3d8dbb !important;
font-size:8px !important;
font-weight:900 !important;
letter-spacing:.18em !important;
}
body.internetPage
.internetTvScreenLogoV11 strong{
display:block !important;
font-size:42px !important;
line-height:.95 !important;
letter-spacing:-.06em !important;
background:
linear-gradient(
100deg,
#245f92,
#3d9bd0 42%,
#777fe8 75%,
#9785ef
) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color:transparent !important;
}
body.internetPage
.internetTvScreenLogoV11 small{
display:block !important;
margin-top:7px !important;
color:#708ca2 !important;
font-size:7px !important;
font-weight:800 !important;
letter-spacing:.08em !important;
}
/* LIVE Status */
body.internetPage .internetTvLiveV11{
position:absolute !important;
left:13px !important;
top:12px !important;
display:flex !important;
align-items:center !important;
gap:5px !important;
color:#4b7391 !important;
font-size:7px !important;
font-weight:900 !important;
letter-spacing:.10em !important;
}
body.internetPage .internetTvLiveV11 i{
width:6px !important;
height:6px !important;
display:block !important;
border-radius:50% !important;
background:#50c9e9 !important;
box-shadow:
0 0 0 5px rgba(80,201,233,.10),
0 0 17px rgba(80,201,233,.44) !important;
animation:
internetTvLivePulseV11
1.7s ease-in-out infinite !important;
}
/* Signal-Wellen */
body.internetPage .internetTvWaveV11{
position:absolute !important;
right:12px !important;
bottom:11px !important;
border:
1px solid rgba(114,137,234,.34) !important;
border-left-color:transparent !important;
border-bottom-color:transparent !important;
border-radius:50% !important;
transform:
rotate(-45deg) !important;
opacity:.65 !important;
}
body.internetPage
.internetTvWaveV11.waveA{
width:16px !important;
height:16px !important;
}
body.internetPage
.internetTvWaveV11.waveB{
width:26px !important;
height:26px !important;
right:7px !important;
bottom:6px !important;
animation:
internetTvWaveV11
2.2s ease-out infinite !important;
}
body.internetPage
.internetTvWaveV11.waveC{
width:37px !important;
height:37px !important;
right:1px !important;
bottom:0 !important;
animation:
internetTvWaveV11
2.2s .45s ease-out infinite !important;
}
/* Stand */
body.internetPage .internetTvStandV11{
position:absolute !important;
left:50% !important;
top:158px !important;
width:78px !important;
height:24px !important;
transform:
translateX(-50%) !important;
}
body.internetPage .internetTvStandV11::before{
content:"" !important;
position:absolute !important;
left:50% !important;
width:5px !important;
height:17px !important;
transform:
translateX(-50%) !important;
border-radius:0 0 6px 6px !important;
background:
linear-gradient(
180deg,
#9ccce1,
#b7c8e6
) !important;
}
body.internetPage .internetTvStandV11 i{
position:absolute !important;
left:50% !important;
bottom:0 !important;
width:72px !important;
height:6px !important;
transform:
translateX(-50%) !important;
border-radius:999px !important;
background:
linear-gradient(
90deg,
#b4dce9,
#b6c6eb
) !important;
box-shadow:
0 5px 12px rgba(65,110,148,.12) !important;
}
/* ======================================================
FLOATING FEATURE CHIPS
====================================================== */
body.internetPage .internetTvFloatV11{
position:absolute !important;
min-width:130px !important;
padding:
8px 10px !important;
display:flex !important;
align-items:center !important;
gap:7px !important;
border-radius:13px !important;
border:
1px solid rgba(109,172,217,.23) !important;
background:
rgba(255,255,255,.88) !important;
box-shadow:
0 10px 25px rgba(58,112,152,.10) !important;
backdrop-filter:
blur(12px) !important;
}
body.internetPage
.internetTvFloatV11
> span{
flex:
0 0 27px !important;
width:27px !important;
height:27px !important;
display:grid !important;
place-items:center !important;
border-radius:9px !important;
color:#537abf !important;
background:
linear-gradient(
145deg,
#e8f7fd,
#efedff
) !important;
font-size:9px !important;
font-weight:900 !important;
}
body.internetPage
.internetTvFloatV11 strong{
display:block !important;
color:#355875 !important;
font-size:9px !important;
}
body.internetPage
.internetTvFloatV11 small{
display:block !important;
margin-top:1px !important;
color:#8296a5 !important;
font-size:6.5px !important;
}
body.internetPage .internetTvFloatLiveV11{
left:8px !important;
top:31px !important;
animation:
internetTvChipLeftV11
4.1s ease-in-out infinite !important;
}
body.internetPage .internetTvFloatReplayV11{
right:5px !important;
top:38px !important;
animation:
internetTvChipRightV11
4.8s ease-in-out infinite !important;
}
body.internetPage .internetTvFloatMobileV11{
right:34px !important;
bottom:7px !important;
animation:
internetTvChipBottomV11
5.2s ease-in-out infinite !important;
}
/* ======================================================
HERO NETWORK VISUAL – ETWAS MEHR LEBEN
====================================================== */
body.internetPage
.internetHeroV1
.internetNetworkNode,
body.internetPage
.internetHeroV1
.networkNode{
transition:
transform .28s ease,
box-shadow .28s ease !important;
animation:
internetNetworkNodeFloatV11
5.5s ease-in-out infinite alternate !important;
}
body.internetPage
.internetHeroV1
.internetNetworkNode:nth-child(2),
body.internetPage
.internetHeroV1
.networkNode:nth-child(2){
animation-delay:
-.8s !important;
}
body.internetPage
.internetHeroV1
.internetNetworkNode:nth-child(3),
body.internetPage
.internetHeroV1
.networkNode:nth-child(3){
animation-delay:
-1.6s !important;
}
/* ======================================================
KEYFRAMES
====================================================== */
@keyframes internetTvBlobLeftV11{
from{
transform:
translate3d(-18px,-6px,0)
scale(.96);
}
to{
transform:
translate3d(42px,32px,0)
scale(1.10);
}
}
@keyframes internetTvBlobRightV11{
from{
transform:
translate3d(20px,-16px,0)
scale(1.05);
}
to{
transform:
translate3d(-38px,30px,0)
scale(.94);
}
}
@keyframes internetTvGlowPulseV11{
0%,
100%{
opacity:.65;
transform:
translate(-50%,-50%)
scale(.94);
}
50%{
opacity:1;
transform:
translate(-50%,-50%)
scale(1.08);
}
}
@keyframes internetTvScreenFloatV11{
0%,
100%{
transform:
translateX(-50%)
translateY(0);
}
50%{
transform:
translateX(-50%)
translateY(-4px);
}
}
@keyframes internetTvReflectionV11{
0%{
transform:
translateX(-85px)
rotate(27deg);
opacity:0;
}
28%{
opacity:.65;
}
65%{
opacity:.45;
}
100%{
transform:
translateX(440px)
rotate(27deg);
opacity:0;
}
}
@keyframes internetTvLivePulseV11{
0%,
100%{
opacity:.65;
transform:
scale(.88);
}
50%{
opacity:1;
transform:
scale(1.18);
}
}
@keyframes internetTvWaveV11{
0%{
opacity:.15;
transform:
rotate(-45deg)
scale(.75);
}
55%{
opacity:.75;
}
100%{
opacity:0;
transform:
rotate(-45deg)
scale(1.18);
}
}
@keyframes internetTvChipLeftV11{
0%,
100%{
transform:
translateY(0)
rotate(-1deg);
}
50%{
transform:
translateY(-5px)
rotate(1deg);
}
}
@keyframes internetTvChipRightV11{
0%,
100%{
transform:
translateY(-2px)
rotate(1deg);
}
50%{
transform:
translateY(4px)
rotate(-1deg);
}
}
@keyframes internetTvChipBottomV11{
0%,
100%{
transform:
translateX(0)
translateY(0);
}
50%{
transform:
translateX(5px)
translateY(-3px);
}
}
@keyframes internetNetworkNodeFloatV11{
from{
transform:
translateY(0);
}
to{
transform:
translateY(-4px);
}
}
/* INTERNET_TV_VISUAL_MOTION_V11_END */
/* INTERNET_TV_BADGE_FIX_V12_START */
/* ======================================================
INTERNET TV – PREMIUM EMPFEHLUNG BADGE
====================================================== */
/*
Das Badge liegt leicht oberhalb der Karte.
Deshalb darf nur die featured Karte ihren
Inhalt vertikal sichtbar herausragen lassen.
*/
body.internetPage
#tv-kombi
#tvTariffGrid
.tariffCard.featured{
overflow:visible !important;
margin-top:10px !important;
}
/*
Die innere Karte bleibt optisch sauber:
der Hintergrund der featured Card wird weiterhin
über die eigentliche Kartenfläche dargestellt.
*/
body.internetPage
#tv-kombi
#tvTariffGrid
.tariffCard.featured::before{
border-radius:inherit !important;
}
/* bekannte Badge-Klassen */
body.internetPage
#tv-kombi
#tvTariffGrid
.tariffCard.featured
.tariffBadge,
body.internetPage
#tv-kombi
#tvTariffGrid
.tariffCard.featured
.badge,
body.internetPage
#tv-kombi
#tvTariffGrid
.tariffCard.featured
.recommendation,
body.internetPage
#tv-kombi
#tvTariffGrid
.tariffCard.featured
.productBadge{
position:absolute !important;
top:-11px !important;
left:20px !important;
z-index:20 !important;
width:auto !important;
max-width:max-content !important;
min-height:24px !important;
padding:
0 12px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:
999px !important;
border:
1px solid rgba(255,255,255,.42) !important;
background:
linear-gradient(
110deg,
#53c8ec 0%,
#69b6ee 52%,
#8c8df0 100%
) !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
font-size:
9px !important;
font-weight:
850 !important;
line-height:
1 !important;
letter-spacing:
.055em !important;
text-transform:
uppercase !important;
white-space:
nowrap !important;
box-shadow:
0 8px 18px rgba(75,139,205,.20),
0 0 18px rgba(120,139,236,.10) !important;
transform:none !important;
}
/*
Falls das Badge direkt als Span im Renderer kommt,
aber keine der obigen Klassen besitzt.
Nur direct child + featured + kurzer Badge-Bereich.
*/
body.internetPage
#tv-kombi
#tvTariffGrid
.tariffCard.featured
> .productBadge,
body.internetPage
#tv-kombi
#tvTariffGrid
.tariffCard.featured
> .tariffBadge{
top:-11px !important;
}
/* Premium-Inhalt bekommt oben minimal Luft */
body.internetPage
#tv-kombi
#tvTariffGrid
.tariffCard.featured
h3{
margin-top:
12px !important;
}
/* Hover darf das Badge nicht abschneiden */
body.internetPage
#tv-kombi
#tvTariffGrid
.tariffCard.featured:hover{
overflow:visible !important;
}
/* INTERNET_TV_BADGE_FIX_V12_END */
/* INTERNET_MAIN_BADGE_FIX_V13_START */
/* ======================================================
INTERNET HAUPTTARIFE
Empfehlung oberhalb der 1-Gbit/s-Karte
====================================================== */
/*
Die featured Karte braucht sichtbaren Overflow,
sonst wird das oberhalb platzierte Badge abgeschnitten.
*/
body.internetPage
#internetTariffGrid
.tariffCard.featured{
overflow:visible !important;
margin-top:12px !important;
}
/*
Etwas Abstand für den Inhalt der empfohlenen Karte.
*/
body.internetPage
#internetTariffGrid
.tariffCard.featured
h3{
margin-top:13px !important;
}
/* ======================================================
BEKANNTE BADGE-KLASSEN
====================================================== */
body.internetPage
#internetTariffGrid
.tariffCard.featured
.tariffBadge,
body.internetPage
#internetTariffGrid
.tariffCard.featured
.productBadge,
body.internetPage
#internetTariffGrid
.tariffCard.featured
.recommendation,
body.internetPage
#internetTariffGrid
.tariffCard.featured
.badge{
position:absolute !important;
top:-12px !important;
left:20px !important;
z-index:30 !important;
width:auto !important;
max-width:max-content !important;
min-height:25px !important;
padding:
0 12px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:
999px !important;
border:
1px solid rgba(255,255,255,.50) !important;
background:
linear-gradient(
110deg,
#50c7eb 0%,
#69b8ef 48%,
#8b91ef 100%
) !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
font-size:
9px !important;
font-weight:
850 !important;
line-height:
1 !important;
letter-spacing:
.055em !important;
text-transform:
uppercase !important;
white-space:
nowrap !important;
box-shadow:
0 8px 18px rgba(67,143,204,.22),
0 0 22px rgba(111,139,235,.11) !important;
transform:none !important;
}
/* Hover darf Badge ebenfalls nicht abschneiden */
body.internetPage
#internetTariffGrid
.tariffCard.featured:hover{
overflow:visible !important;
}
/* etwas Platz über der gesamten Tarifreihe */
body.internetPage
#internetTariffGrid{
padding-top:
13px !important;
}
/* INTERNET_MAIN_BADGE_FIX_V13_END */
/* INTERNET_MAIN_BADGE_DYNAMIC_V13 */
body.internetPage
#internetTariffGrid
.tariffCard.featured
.Badge{
position:absolute !important;
top:-12px !important;
left:20px !important;
z-index:30 !important;
min-height:25px !important;
padding:0 12px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:999px !important;
background:linear-gradient(
110deg,
#50c7eb,
#69b8ef 48%,
#8b91ef
) !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
font-size:9px !important;
font-weight:850 !important;
white-space:nowrap !important;
box-shadow:
0 8px 18px rgba(67,143,204,.22) !important;
}
/* INTERNET_AVAILABILITY_FINAL_V6_START */
body.internetPage .internetAvailabilityFinalV6{
position:relative;
padding:42px 20px 46px;
background:
linear-gradient(
135deg,
#e7f6ff 0%,
#f3fbff 52%,
#eaf8ff 100%
);
}
body.internetPage
.internetAvailabilityFinalV6 > .shell{
width:min(100%,1060px);
max-width:1060px;
margin:0 auto;
padding:0;
}
body.internetPage
.internetAvailabilityFinalV6
.internetSpeedCheckBar{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
gap:0;
padding:32px 36px 30px;
border:1px solid rgba(119,190,229,.28);
border-radius:28px;
background:
linear-gradient(
180deg,
rgba(255,255,255,.96),
rgba(249,253,255,.95)
);
box-shadow:
0 22px 55px rgba(59,122,158,.10);
}
body.internetPage
.internetAvailabilityFinalV6
.internetSpeedCheckIntro{
width:100%;
max-width:700px;
margin:0 auto 22px;
display:flex;
flex-direction:column;
align-items:center;
gap:7px;
text-align:center;
}
body.internetPage
.internetAvailabilityFinalV6
.internetSpeedCheckIcon{
width:46px;
height:46px;
display:grid;
place-items:center;
margin-bottom:3px;
border:1px solid rgba(94,180,225,.25);
border-radius:14px;
background:#fff;
color:#2195c7;
font-size:19px;
}
body.internetPage
.internetAvailabilityFinalV6
.internetSpeedCheckIntro .k{
margin:0;
color:#36a2d1;
font-size:12px;
font-weight:850;
letter-spacing:.14em;
}
body.internetPage
.internetAvailabilityFinalV6
.internetSpeedCheckIntro strong{
display:block;
width:100%;
margin:0;
color:#173047;
font-size:clamp(25px,2.5vw,35px);
font-weight:850;
line-height:1.12;
text-align:center;
}
body.internetPage
.internetAvailabilityFinalV6
.internetSpeedCheckIntro small{
display:block;
max-width:590px;
margin:0 auto;
color:#718899;
font-size:14px;
line-height:1.5;
text-align:center;
}
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilityModes{
display:flex;
width:max-content;
margin:0 auto 20px;
padding:5px;
gap:4px;
border:1px solid rgba(119,190,229,.23);
border-radius:15px;
background:#edf7fc;
}
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilityMode{
min-width:125px;
height:42px;
padding:0 18px;
border:0;
border-radius:11px;
background:transparent;
color:#607688;
font:inherit;
font-size:13px;
font-weight:800;
cursor:pointer;
}
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilityMode.active{
background:#fff;
color:#173047;
box-shadow:
0 6px 17px rgba(61,132,170,.11);
}
body.internetPage
.internetAvailabilityFinalV6
#internetAddressFields,
body.internetPage
.internetAvailabilityFinalV6
#internetOtoFields{
width:100%;
max-width:800px;
margin:0 auto;
}
body.internetPage
.internetAvailabilityFinalV6
#internetAddressFields{
display:grid;
grid-template-columns:minmax(0,1fr) 118px;
align-items:end;
gap:12px;
}
body.internetPage
.internetAvailabilityFinalV6
#internetOtoFields{
display:grid;
grid-template-columns:minmax(0,1fr) 140px 118px;
align-items:end;
gap:12px;
}
body.internetPage
.internetAvailabilityFinalV6
#internetAddressFields[hidden],
body.internetPage
.internetAvailabilityFinalV6
#internetOtoFields[hidden]{
display:none;
}
body.internetPage
.internetAvailabilityFinalV6
.internetSpeedFields label{
min-width:0;
display:block;
text-align:left;
}
body.internetPage
.internetAvailabilityFinalV6
.internetSpeedFields label > span{
display:block;
margin:0 0 7px 2px;
color:#425d72;
font-size:11px;
font-weight:800;
}
body.internetPage
.internetAvailabilityFinalV6
.internetAddressLookupWrap{
position:relative;
}
body.internetPage
.internetAvailabilityFinalV6
.internetSpeedFields input{
width:100%;
height:52px;
padding:0 16px;
border:1px solid rgba(125,181,212,.27);
border-radius:14px;
outline:0;
background:#fff;
color:#173047;
font:inherit;
font-size:14px;
font-weight:700;
box-shadow:
0 5px 16px rgba(60,120,155,.05);
}
body.internetPage
.internetAvailabilityFinalV6
.internetSpeedFields input:focus{
border-color:#e9ad52;
box-shadow:
0 0 0 3px rgba(239,177,82,.14);
}
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilitySubmit{
width:118px;
height:52px;
padding:0 16px;
border:1px solid #efbb69;
border-radius:14px;
background:
linear-gradient(
135deg,
#ffda9e,
#f7c56f 58%,
#efb359
);
color:#253a4f;
font:inherit;
font-size:13px;
font-weight:900;
cursor:pointer;
box-shadow:
0 11px 24px rgba(217,157,65,.19);
}
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilitySubmit:hover{
transform:translateY(-1px);
box-shadow:
0 14px 29px rgba(217,157,65,.25);
}
body.internetPage
.internetAvailabilityFinalV6
.internetAddressSuggestions{
position:absolute;
z-index:100;
top:calc(100% + 7px);
left:0;
right:0;
max-height:290px;
overflow-y:auto;
border:1px solid rgba(119,180,212,.30);
border-radius:14px;
background:#fff;
box-shadow:
0 18px 38px rgba(44,91,121,.15);
}
body.internetPage
.internetAvailabilityFinalV6
.internetAddressSuggestions button{
display:block;
width:100%;
padding:12px 15px;
border:0;
border-bottom:1px solid #edf3f7;
background:#fff;
color:#19344b;
font:inherit;
text-align:left;
cursor:pointer;
}
body.internetPage
.internetAvailabilityFinalV6
.internetAddressSuggestions button:hover{
background:#edf9ff;
}
body.internetPage
.internetAvailabilityFinalV6
.internetAddressSuggestions strong{
color:#19344b;
font-size:13px;
font-weight:750;
}
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilityResult{
width:100%;
max-width:800px;
margin:18px auto 0;
}
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilitySuccess,
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilityState,
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilityChoices{
width:100%;
padding:19px;
border:1px solid rgba(119,181,214,.22);
border-radius:17px;
background:
linear-gradient(
180deg,
#f5fbff,
#edf8fd
);
box-shadow:none;
text-align:left;
}
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilitySuccessHead{
display:flex;
align-items:center;
gap:11px;
}
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilityCheck,
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilityStateIcon{
width:39px;
height:39px;
flex:0 0 39px;
display:grid;
place-items:center;
border-radius:11px;
background:#fff;
color:#1698c8;
font-size:18px;
font-weight:900;
}
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilityTech{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:9px;
margin-top:15px;
}
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilityTech > div{
padding:13px 14px;
border:1px solid rgba(119,181,214,.18);
border-radius:13px;
background:#fff;
}
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilityNote{
margin:12px 0 0;
padding:11px 13px;
border-radius:12px;
background:#dcf5ee;
color:#456d66;
font-size:12px;
}
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilityActions{
display:flex;
align-items:center;
gap:9px;
margin-top:14px;
}
body.internetPage
.internetAvailabilityFinalV6
.internetSpeedCheckHint{
width:100%;
max-width:800px;
margin:12px auto 0;
color:#798f9e;
font-size:10px;
text-align:center;
}
/* INTERNET_AVAILABILITY_FINAL_V6_END */
/* INTERNET_AVAILABILITY_TOGGLE_FINAL_V8_START */
/*
* FUNKTIONSREGEL
*
* Hidden gewinnt immer.
* Diese beiden Regeln sind absichtlich
* !important, weil sie einen Funktionszustand
* schützen und kein Layout flicken.
*/
body.internetPage
.internetAvailabilityFinalV6
#internetAddressFields[hidden],
body.internetPage
.internetAvailabilityFinalV6
#internetOtoFields[hidden]{
display:none !important;
}
/*
* MODE SWITCH
*/
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilityMode{
transition:
background .18s ease,
color .18s ease,
box-shadow .18s ease,
transform .18s ease;
}
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilityMode.active{
background:#fff !important;
color:#173047 !important;
box-shadow:
0 6px 17px
rgba(61,132,170,.12) !important;
}
/*
* PRÜFEN
*
* Nur diese zwei Buttons.
* Keine anderen .glass Buttons auf der Seite.
*/
body.internetPage
.internetAvailabilityFinalV6
#internetAvailabilitySubmit,
body.internetPage
.internetAvailabilityFinalV6
#internetOtoSubmit{
appearance:none !important;
border:
1px solid
#e5a64b !important;
background:
linear-gradient(
135deg,
#ffe2aa 0%,
#f8ca75 48%,
#efb153 100%
) !important;
background-image:
linear-gradient(
135deg,
#ffe2aa 0%,
#f8ca75 48%,
#efb153 100%
) !important;
color:#263a4c !important;
box-shadow:
0 11px 25px
rgba(205,143,48,.20) !important;
font-weight:900 !important;
}
/*
* Falls die globale glass-Klasse
* Pseudo-Elemente verwendet:
*/
body.internetPage
.internetAvailabilityFinalV6
#internetAvailabilitySubmit::before,
body.internetPage
.internetAvailabilityFinalV6
#internetAvailabilitySubmit::after,
body.internetPage
.internetAvailabilityFinalV6
#internetOtoSubmit::before,
body.internetPage
.internetAvailabilityFinalV6
#internetOtoSubmit::after{
content:none !important;
display:none !important;
}
body.internetPage
.internetAvailabilityFinalV6
#internetAvailabilitySubmit:hover,
body.internetPage
.internetAvailabilityFinalV6
#internetOtoSubmit:hover{
transform:
translateY(-1px);
background:
linear-gradient(
135deg,
#ffe8bd 0%,
#fbd184 48%,
#f3b95f 100%
) !important;
box-shadow:
0 14px 30px
rgba(205,143,48,.27) !important;
}
/* INTERNET_AVAILABILITY_TOGGLE_FINAL_V8_END */
/* INTERNET_AVAILABILITY_BUTTON_MATCH_V9_START */
body.internetPage
.internetAvailabilityFinalV6
#internetAvailabilitySubmit,
body.internetPage
.internetAvailabilityFinalV6
#internetOtoSubmit{
border:
1px solid
rgba(239,181,105,.72) !important;
background:
linear-gradient(
135deg,
#ffe8c3 0%,
#ffddb0 52%,
#ffd39a 100%
) !important;
background-image:
linear-gradient(
135deg,
#ffe8c3 0%,
#ffddb0 52%,
#ffd39a 100%
) !important;
color:#24415a !important;
box-shadow:
0 10px 24px
rgba(214,161,92,.13),
inset 0 1px 0
rgba(255,255,255,.65) !important;
font-weight:850 !important;
}
body.internetPage
.internetAvailabilityFinalV6
#internetAvailabilitySubmit:hover,
body.internetPage
.internetAvailabilityFinalV6
#internetOtoSubmit:hover{
border-color:
rgba(232,166,78,.86) !important;
background:
linear-gradient(
135deg,
#ffeccf 0%,
#ffe2b8 52%,
#ffd8a4 100%
) !important;
background-image:
linear-gradient(
135deg,
#ffeccf 0%,
#ffe2b8 52%,
#ffd8a4 100%
) !important;
color:#203c55 !important;
box-shadow:
0 13px 28px
rgba(214,161,92,.18) !important;
transform:
translateY(-1px);
}
/* INTERNET_AVAILABILITY_BUTTON_MATCH_V9_END */
/* INTERNET_TV_PRIMARY_ORANGE_V2_START */
body.internetPage
.internetTvOptionsV4
.internetTvPrimaryAction{
border:
1px solid
rgba(239,181,105,.72) !important;
background:
linear-gradient(
135deg,
#ffe8c3 0%,
#ffddb0 52%,
#ffd39a 100%
) !important;
background-color:
#ffddb0 !important;
background-image:
linear-gradient(
135deg,
#ffe8c3 0%,
#ffddb0 52%,
#ffd39a 100%
) !important;
color:
#24415a !important;
box-shadow:
0 10px 24px
rgba(214,161,92,.14),
inset 0 1px 0
rgba(255,255,255,.65) !important;
font-weight:
850 !important;
}
body.internetPage
.internetTvOptionsV4
.internetTvPrimaryAction:hover{
border-color:
rgba(232,166,78,.86) !important;
background:
linear-gradient(
135deg,
#ffeccf 0%,
#ffe2b8 52%,
#ffd8a4 100%
) !important;
background-color:
#ffe2b8 !important;
background-image:
linear-gradient(
135deg,
#ffeccf 0%,
#ffe2b8 52%,
#ffd8a4 100%
) !important;
color:
#203c55 !important;
transform:
translateY(-1px);
box-shadow:
0 13px 28px
rgba(214,161,92,.19) !important;
}
body.internetPage
.internetTvOptionsV4
.internetTvPrimaryAction::before,
body.internetPage
.internetTvOptionsV4
.internetTvPrimaryAction::after{
content:
none !important;
display:
none !important;
}
/* INTERNET_TV_PRIMARY_ORANGE_V2_END */
/* INTERNET_AVAILABLE_TARIFFS_ORANGE_V1_START */
/*
* Verfügbare Tarife ansehen
* Primärer CTA nach erfolgreicher Anschlussprüfung.
*
* Neue Prüfung bleibt absichtlich neutral/weiss.
*/
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilityActions
> a.glass{
border:
1px solid
rgba(239,181,105,.72) !important;
background:
linear-gradient(
135deg,
#ffe8c3 0%,
#ffddb0 52%,
#ffd39a 100%
) !important;
background-color:
#ffddb0 !important;
background-image:
linear-gradient(
135deg,
#ffe8c3 0%,
#ffddb0 52%,
#ffd39a 100%
) !important;
color:
#24415a !important;
box-shadow:
0 10px 24px
rgba(214,161,92,.14),
inset 0 1px 0
rgba(255,255,255,.65) !important;
font-weight:
850 !important;
}
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilityActions
> a.glass:hover{
border-color:
rgba(232,166,78,.86) !important;
background:
linear-gradient(
135deg,
#ffeccf 0%,
#ffe2b8 52%,
#ffd8a4 100%
) !important;
background-color:
#ffe2b8 !important;
background-image:
linear-gradient(
135deg,
#ffeccf 0%,
#ffe2b8 52%,
#ffd8a4 100%
) !important;
color:
#203c55 !important;
transform:
translateY(-1px);
box-shadow:
0 13px 28px
rgba(214,161,92,.19) !important;
}
/* globale .glass-Pseudo-Elemente hier ausschalten */
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilityActions
> a.glass::before,
body.internetPage
.internetAvailabilityFinalV6
.internetAvailabilityActions
> a.glass::after{
content:none !important;
display:none !important;
}
/* INTERNET_AVAILABLE_TARIFFS_ORANGE_V1_END */