/** * ASI Avada Elements - Layout-Stylesheet * * Automatisch aus dem HTML-Mockup "asi_unternehmensseite_startseite_routeB_weiss.html" * erzeugt. Alle Selektoren sind auf .asi-el gescoped, damit sie ausserhalb der * ASI-Elemente nichts im Avada-Theme ueberschreiben. * * Schrift: Inter. Bitte lokal einbinden (DSGVO) oder in den Avada Global Options * als Typografie hinterlegen. Fallback ist Helvetica/Arial. */ .asi-el { --navy:#003760; --navy-deep:#002746; --blue:#009FE3; --blue-light:#63C8F1; --yellow:#FFD11C; --ink:#07243D; --muted:#6F8193; --soft:#F4F8FB; --line:#E3ECF3; --white:#FFFFFF; --shadow:0 30px 70px rgba(0,39,70,.14); --shadow-soft:0 16px 45px rgba(0,39,70,.10); } .asi-el, .asi-el * { box-sizing: border-box; } .asi-el, .asi-el { width: 1440px; margin:0; padding:0; background:#eef4f7; color:var(--ink); font-family: Inter, Arial, Helvetica, sans-serif; line-height:1.45; } .asi-el a { color:inherit; text-decoration:none; } .asi-el { width:1440px; margin:0 auto; background:var(--white); overflow:hidden; position:relative; } .asi-el .wrap { width:1200px; margin:0 auto; position:relative; } .asi-el .eyebrow { font-size:12px; text-transform:uppercase; letter-spacing:.22em; font-weight:900; color:var(--blue); margin-bottom:14px; } .asi-el .eyebrow.yellow { color:var(--yellow); } .asi-el h1, .asi-el h2, .asi-el h3, .asi-el p { margin:0; } .asi-el h1 { font-size:66px; line-height:.98; letter-spacing:-.055em; font-weight:950; } .asi-el h2 { font-size:48px; line-height:1.06; letter-spacing:-.045em; font-weight:950; } .asi-el h3 { font-size:22px; line-height:1.15; font-weight:900; } .asi-el .lead { font-size:20px; line-height:1.55; color:#D8EDF8; } .asi-el .txt { font-size:15px; color:var(--muted); } .asi-el .btn { display:inline-flex; align-items:center; gap:12px; padding:16px 30px; font-weight:900; font-size:14px; text-transform:uppercase; letter-spacing:.02em; clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%); } .asi-el .btn.primary { background:var(--yellow); color:var(--navy-deep); box-shadow:0 18px 30px rgba(255,209,28,.20); } .asi-el .btn.secondary { color:white; border:1px solid rgba(255,255,255,.42); background:rgba(255,255,255,.08); } .asi-el .btn.blue { background:var(--navy); color:white; } .asi-el .header { height:96px; background:var(--navy-deep); color:white; position:relative; z-index:10; } .asi-el .header:after { content:""; position:absolute; inset:0 0 0 auto; width:36%; background:linear-gradient(112deg, transparent 0 17%, rgba(0,159,227,.26) 17% 100%); } .asi-el .nav { width:1200px; height:96px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; } .asi-el .brand { display:flex; align-items:center; gap:14px; } .asi-el .logoBox { width:170px; height:62px; display:flex; align-items:center; padding:11px 14px; background:rgba(255,255,255,.07); clip-path:polygon(0 0, 100% 0, 88% 100%, 0 100%); } .asi-el .logoBox img { max-width:132px; max-height:50px; display:block; } .asi-el .brandLine { height:44px; width:1px; background:rgba(255,255,255,.22); } .asi-el .brand small { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#C7E4F5; font-weight:800; } .asi-el .navlinks { display:flex; align-items:center; gap:28px; font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.045em; } .asi-el .navlinks a:not(.career) { position:relative; } .asi-el .navlinks a:not(.career):after { content:""; position:absolute; left:0; bottom:-9px; width:0; height:3px; background:var(--yellow); transition:.2s; } .asi-el .navlinks a:not(.career):hover:after { width:100%; } .asi-el .career { background:var(--yellow); color:var(--navy-deep); padding:14px 22px; clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 100%, 0 100%); } .asi-el .hero { min-height:760px; position:relative; color:white; background:linear-gradient(120deg, var(--navy-deep), var(--navy)); } .asi-el .hero:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,39,70,.98) 0 42%, rgba(0,55,96,.75) 42% 63%, rgba(0,55,96,.18) 63% 100%); z-index:1; } .asi-el .hero:after { content:""; position:absolute; right:-180px; top:70px; width:650px; height:650px; background:radial-gradient(circle, rgba(0,159,227,.34), transparent 64%); z-index:1; } .asi-el .hero .wrap { z-index:2; display:grid; grid-template-columns:560px 1fr; gap:50px; padding:88px 0 58px; } .asi-el .heroCopy { padding-top:36px; } .asi-el .hero h1 { max-width:650px; } .asi-el .hero .lead { margin:28px 0 34px; } .asi-el .heroBtns { display:flex; gap:16px; } .asi-el .heroVisual { min-height:560px; position:relative; } .asi-el .heroPhoto { position:absolute; right:-80px; top:0; width:690px; height:500px; overflow:hidden; box-shadow:var(--shadow); clip-path:polygon(8% 0, 100% 0, 91% 100%, 0 100%); } .asi-el .heroPhoto img { width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.06); } .asi-el .heroInset { position:absolute; left:-8px; bottom:40px; width:330px; height:230px; background:white; padding:10px; box-shadow:0 22px 55px rgba(0,0,0,.26); clip-path:polygon(0 0, 100% 0, 88% 100%, 0 100%); } .asi-el .heroInset img { width:100%; height:100%; object-fit:cover; clip-path:polygon(0 0, 100% 0, 88% 100%, 0 100%); } .asi-el .metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:52px; } .asi-el .metric { border-top:1px solid rgba(255,255,255,.26); padding-top:18px; } .asi-el .metric strong { display:block; color:var(--yellow); font-size:34px; line-height:1; letter-spacing:-.03em; font-weight:950; } .asi-el .metric span { display:block; color:#C9E4F2; font-size:13px; font-weight:800; margin-top:6px; } .asi-el .heroSlash { position:absolute; left:0; right:0; bottom:0; height:64px; background:linear-gradient(100deg, var(--yellow) 0 18%, var(--blue) 18% 19.5%, transparent 19.5%); z-index:2; clip-path:polygon(0 34%, 100% 0, 100% 100%, 0 100%); } .asi-el .emergencyFlag { position:fixed; right:0; top:320px; z-index:99; color:white; background:var(--navy-deep); box-shadow:0 18px 40px rgba(0,39,70,.25); clip-path:polygon(14% 0, 100% 0, 100% 100%, 0 100%); width:78px; min-height:236px; display:flex; align-items:center; justify-content:center; padding:18px 12px 18px 20px; } .asi-el .emergencyFlag div { writing-mode:vertical-rl; transform:rotate(180deg); text-transform:uppercase; font-weight:950; letter-spacing:.08em; font-size:13px; } .asi-el .emergencyFlag b { color:var(--yellow); } .asi-el .quick { margin-top:-42px; position:relative; z-index:5; } .asi-el .quickGrid { background:white; display:grid; grid-template-columns:1.15fr 1fr 1fr 1fr; box-shadow:var(--shadow); clip-path:polygon(0 0, 100% 0, 98.8% 100%, 0 100%); } .asi-el .quickItem { min-height:138px; padding:26px 26px; border-right:1px solid var(--line); display:flex; gap:18px; align-items:center; } .asi-el .quickItem:last-child { border-right:none; } .asi-el .qBadge { width:66px; height:66px; flex:0 0 66px; border:1px solid rgba(0,159,227,.20); background:#EFF8FC; display:grid; place-items:center; clip-path:polygon(0 0, 100% 0, 84% 100%, 0 100%); overflow:hidden; } .asi-el .qBadge img { max-width:58px; max-height:60px; object-fit:contain; } .asi-el .qBadge.phone { background:var(--navy); color:var(--yellow); font-size:30px; font-weight:900; } .asi-el .quickItem b { display:block; font-size:16px; margin-bottom:3px; line-height:1.2; } .asi-el .quickItem span { color:var(--muted); font-size:13px; display:block; } .asi-el .quickItem strong { color:var(--navy); font-size:22px; line-height:1.1; display:block; } .asi-el .section { padding:112px 0; } .asi-el .section.soft { background:var(--soft); } .asi-el .headrow { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:48px; } .asi-el #news .headrow { justify-content:flex-start; } .asi-el .headrow p { max-width:520px; color:var(--muted); font-size:17px; } .asi-el .services { position:relative; background:#FFFFFF; padding-top:118px; } .asi-el .services:before { content:""; position:absolute; left:0; top:92px; width:144px; height:320px; background:var(--yellow); clip-path:polygon(0 0, 100% 0, 74% 100%, 0 100%); } .asi-el .serviceTop { max-width:880px; margin:0 auto 52px; text-align:center; } .asi-el .serviceTop p { display:none; } .asi-el .serviceGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .asi-el .serviceGridExpanded { grid-template-columns:repeat(4,1fr); gap:22px; } .asi-el .serviceCard { background:#FFFFFF; box-shadow:var(--shadow-soft); border:1px solid var(--line); min-height:304px; overflow:hidden; position:relative; transition:.2s; } .asi-el .serviceCard:after { content:""; position:absolute; top:0; left:0; width:100%; height:8px; background:linear-gradient(90deg,var(--yellow) 0 30%, var(--blue) 30% 100%); } .asi-el .servicePhoto { height:152px; overflow:hidden; clip-path:polygon(0 0, 100% 0, 91% 100%, 0 100%); background:#e9f2f7; } .asi-el .servicePhoto img { width:100%; height:100%; object-fit:cover; filter:saturate(.92) contrast(1.02); } .asi-el .serviceBody { padding:22px 24px 26px; } .asi-el .serviceBody h3 { margin-bottom:10px; font-size:20px; color:var(--navy-deep); } .asi-el .serviceBody p { color:var(--muted); font-size:14px; line-height:1.48; } .asi-el .serviceMore { margin-top:18px; color:var(--blue); font-weight:950; font-size:22px; } .asi-el .audience { background:var(--navy-deep); color:white; position:relative; padding:105px 0 110px; } .asi-el .audience:before { content:""; position:absolute; top:-1px; left:0; width:100%; height:82px; background:white; clip-path:polygon(0 0,100% 0,100% 12%,0 100%); } .asi-el .audGrid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:40px; } .asi-el .audCard { height:300px; position:relative; overflow:hidden; padding:26px; display:flex; align-items:flex-end; background:#123; clip-path:polygon(0 0,100% 0,90% 100%,0 100%); } .asi-el .audCard img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.52; filter:saturate(.72) grayscale(.08); } .asi-el .audCard:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,39,70,.08), rgba(0,39,70,.94)); } .asi-el .audCard div { position:relative; z-index:1; } .asi-el .audCard h3 { color:white; margin-bottom:10px; } .asi-el .audCard p { color:#D4E8F4; font-size:14px; } .asi-el .audTag { position:absolute; top:22px; left:22px; z-index:2; background:var(--yellow); color:var(--navy-deep); font-weight:950; font-size:12px; padding:8px 12px; clip-path:polygon(0 0,100% 0,86% 100%,0 100%); } .asi-el .why { padding:116px 0; background:linear-gradient(180deg,#FFFFFF,#F7FBFD); position:relative; } .asi-el .whyGrid { display:grid; grid-template-columns:440px 1fr; gap:72px; align-items:start; } .asi-el .whyIntro p { color:var(--muted); font-size:18px; margin-top:20px; } .asi-el .logoProof { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; position:relative; } .asi-el .logoProof:before { content:""; position:absolute; inset:42px 80px auto auto; width:280px; height:280px; border:2px solid rgba(0,159,227,.18); transform:skew(-15deg); } .asi-el .proofTile { min-height:168px; padding:30px 30px; color:white; background:var(--navy); position:relative; overflow:hidden; clip-path:polygon(0 0, 100% 0, 90% 100%, 0 100%); box-shadow:var(--shadow-soft); } .asi-el .proofTile:nth-child(2), .asi-el .proofTile:nth-child(5) { background:var(--blue); color:var(--navy-deep); transform:translateY(26px); } .asi-el .proofTile:nth-child(3) { background:var(--yellow); color:var(--navy-deep); } .asi-el .proofTile:after { content:""; position:absolute; right:-28px; bottom:-45px; width:120px; height:150px; background:rgba(255,255,255,.16); transform:skew(-15deg); } .asi-el .proofTile small { display:block; text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:950; opacity:.86; margin-bottom:16px; } .asi-el .proofTile strong { display:block; font-size:36px; line-height:1; letter-spacing:-.03em; font-weight:950; } .asi-el .proofTile span { display:block; margin-top:10px; font-size:14px; max-width:250px; } .asi-el .news { padding:108px 0 116px; background:#FFFFFF; } .asi-el .newsGrid { display:grid; grid-template-columns:1.22fr 1fr 1fr; gap:24px; } .asi-el .newsCard { background:white; border:1px solid var(--line); box-shadow:var(--shadow-soft); overflow:hidden; position:relative; } .asi-el .newsImg { height:248px; overflow:hidden; clip-path:polygon(0 0,100% 0,100% 88%,0 100%); background:#F2F7FA; } .asi-el .newsCard:not(.feature) .newsImg { height:216px; } .asi-el .newsImg img { width:100%; height:100%; object-fit:cover; } .asi-el .newsCard.award .newsImg img { object-fit:contain; padding:26px; background:#F7FAFC; } .asi-el .newsBody { padding:26px 28px 30px; } .asi-el .date { font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:950; color:var(--blue); margin-bottom:12px; } .asi-el .newsBody h3 { margin-bottom:12px; } .asi-el .newsBody p { color:var(--muted); font-size:15px; } .asi-el .newsMore { margin-top:22px; color:var(--navy); font-weight:950; text-transform:uppercase; font-size:13px; } .asi-el .careerCta { padding:112px 0 112px; background:#FFFFFF; } .asi-el .ctaPanel { min-height:270px; background:linear-gradient(120deg,var(--navy-deep),var(--navy)); color:white; display:grid; grid-template-columns:1.15fr .85fr; align-items:stretch; box-shadow:var(--shadow); overflow:hidden; clip-path:polygon(0 0,100% 0,98.5% 100%,0 100%); } .asi-el .ctaCopy { padding:50px 58px; } .asi-el .ctaCopy h2 { font-size:44px; max-width:620px; } .asi-el .ctaCopy p { color:#D4E8F4; font-size:18px; margin:16px 0 28px; max-width:560px; } .asi-el .ctaImage { min-height:270px; overflow:hidden; clip-path:polygon(10% 0, 100% 0, 90% 100%, 0 100%); margin:0 -20px 0 0; } .asi-el .ctaImage img { width:100%; height:100%; object-fit:cover; filter:saturate(.95) contrast(1.04); } .asi-el .contact { padding:100px 0; background:var(--soft); } .asi-el .contactPanel { display:grid; grid-template-columns:390px 1fr; gap:58px; align-items:start; } .asi-el .contactPanel p { color:var(--muted); font-size:17px; margin-top:16px; } .asi-el .contactGrid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .asi-el .contactItem { background:white; border:1px solid var(--line); padding:26px; min-height:128px; position:relative; clip-path:polygon(0 0,100% 0,95% 100%,0 100%); box-shadow:0 12px 30px rgba(0,39,70,.06); } .asi-el .contactItem b { display:block; color:var(--navy-deep); margin-bottom:8px; font-size:17px; } .asi-el .contactItem span { color:var(--muted); font-size:15px; } .asi-el .footer { background:var(--navy-deep); color:#C7E4F5; padding:34px 0; } .asi-el .footer .wrap { display:flex; align-items:center; justify-content:space-between; } .asi-el .footBrand { display:flex; align-items:center; gap:16px; } .asi-el .footBrand img { width:86px; height:auto; } .asi-el .footLinks { display:flex; gap:30px; font-size:12px; text-transform:uppercase; font-weight:850; letter-spacing:.06em; } /* V5 overrides */ .asi-el .header { background:#002746; } .asi-el .header:after { display:none; } .asi-el .hero { background:linear-gradient(120deg,#002746 0%,#003760 100%); } .asi-el .hero:before { background:linear-gradient(90deg, rgba(0,39,70,.98) 0 54%, rgba(0,39,70,.78) 54% 100%); } .asi-el .hero:after { opacity:.18; } .asi-el .services:before { display:none; } .asi-el .whyGrid { grid-template-columns:480px 1fr; gap:62px; } .asi-el .whyIntro p { color:#516779; font-size:17px; line-height:1.72; margin-top:24px; } .asi-el .proofTile.statTile { background:#fff; border-color:rgba(0,159,227,.18); } .asi-el .proofTile.statTile strong { color:var(--blue); font-size:43px; } .asi-el .footer { position:relative; margin-top:-20px; padding:156px 0 34px; color:var(--navy-deep); background:var(--yellow); clip-path:polygon(0 26%,3.5% 26%,3.5% 18%,6% 18%,6% 26%,9% 26%,9% 12%,12% 12%,12% 26%,16% 26%,16% 20%,19% 20%,19% 26%,22% 26%,22% 8%,25% 8%,25% 26%,30% 26%,30% 17%,33% 17%,33% 26%,37% 26%,37% 4%,39.2% 4%,40.5% 0,41.8% 4%,44% 4%,44% 26%,50% 26%,50% 15%,54% 15%,54% 26%,59% 26%,59% 18%,63% 18%,63% 26%,68% 26%,68% 10%,71% 10%,71% 26%,77% 26%,77% 16%,80% 16%,80% 26%,84% 26%,84% 20%,88% 20%,88% 26%,94% 26%,94% 14%,97% 14%,97% 26%,100% 26%,100% 100%,0 100%); } .asi-el .footer:after { content:""; position:absolute; left:0; right:0; top:88px; height:2px; background:rgba(0,39,70,.18); } .asi-el .footerSkyline { position:absolute; left:0; right:0; top:0; height:150px; pointer-events:none; opacity:.22; } .asi-el .footerSkyline span { position:absolute; bottom:30px; background:var(--navy-deep); clip-path:polygon(0 0,100% 0,88% 100%,0 100%); } .asi-el .footerSkyline .one { left:118px; width:52px; height:70px; } .asi-el .footerSkyline .two { left:242px; width:78px; height:105px; } .asi-el .footerSkyline .three { right:235px; width:66px; height:92px; } .asi-el .footerSkyline .four { right:112px; width:96px; height:78px; } .asi-el .footerSkyline .jenTower { left:50%; transform:translateX(-50%); width:56px; height:142px; clip-path:polygon(44% 0,56% 0,66% 100%,34% 100%); } .asi-el .footerGrid { display:grid !important; grid-template-columns:1.45fr .75fr 1fr; gap:64px; align-items:start; } .asi-el .footerBrandNew { display:flex; flex-direction:column; gap:22px; } .asi-el .footerLogoPlate { width:220px; height:86px; display:flex; align-items:center; padding:16px 20px; background:var(--navy-deep); clip-path:polygon(0 0,100% 0,88% 100%,0 100%); box-shadow:0 18px 34px rgba(0,39,70,.18); } .asi-el .footerLogoPlate img { max-width:150px; max-height:56px; display:block; } .asi-el .footerBrandNew p { max-width:470px; color:#123956; font-size:18px; line-height:1.55; font-weight:700; } .asi-el .socials { display:flex; gap:10px; } .asi-el .socials span { width:42px; height:42px; display:grid; place-items:center; border:2px solid rgba(0,39,70,.24); color:var(--navy-deep); font-weight:950; text-transform:uppercase; font-size:12px; clip-path:polygon(0 0,100% 0,84% 100%,0 100%); background:rgba(255,255,255,.28); } .asi-el .footerColumn h3 { font-size:16px; text-transform:uppercase; letter-spacing:.15em; color:var(--navy-deep); margin-bottom:22px; } .asi-el .footerColumn a { display:block; font-size:17px; font-weight:850; color:#123956; padding:9px 0; } .asi-el .phoneButton { background:rgba(255,255,255,.36); border:1px solid rgba(0,39,70,.14); padding:13px 18px !important; margin-bottom:10px; clip-path:polygon(0 0,100% 0,92% 100%,0 100%); } .asi-el .careerFooter { background:var(--navy-deep); color:var(--yellow) !important; padding:15px 22px !important; margin-top:10px; display:inline-block !important; width:max-content; text-transform:uppercase; letter-spacing:.08em; font-size:14px !important; clip-path:polygon(0 0,calc(100% - 20px) 0,100% 100%,0 100%); box-shadow:0 18px 34px rgba(0,39,70,.22); } .asi-el .footerBottom { margin-top:62px; padding-top:22px; border-top:1px solid rgba(0,39,70,.18); display:flex; justify-content:space-between; color:#123956; font-weight:750; font-size:14px; } /* Bearbeitung nach Feedback: Logo, Hover, Bilder, Footer, Rand */ .asi-el, .asi-el { width:auto !important; min-width:0; background:#eaf1f5 !important; } .asi-el { width:100% !important; max-width:1440px !important; margin:0 auto !important; box-shadow:0 0 70px rgba(0,39,70,.12); } .asi-el .wrap, .asi-el .nav { width:min(1200px, calc(100% - 56px)) !important; } .asi-el .logoBox { width:250px !important; height:74px !important; padding:11px 18px !important; background:#fff !important; box-shadow:0 10px 32px rgba(0,39,70,.16); clip-path:polygon(0 0,100% 0,90% 100%,0 100%) !important; } .asi-el .logoBox img { max-width:205px !important; max-height:54px !important; object-fit:contain; } .asi-el .brand small { color:#D9F0FA !important; } .asi-el .navlinks a:not(.career):after { height:4px !important; background:var(--yellow) !important; clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%) !important; } .asi-el .navlinks a:not(.career):hover:after { width:calc(100% + 12px) !important; } .asi-el .quickItem { transition:transform .22s ease, box-shadow .22s ease; } .asi-el .quickItem:hover { transform:translateY(-4px); box-shadow:0 18px 44px rgba(0,39,70,.10); z-index:2; } .asi-el .qBadge img { transition:transform .25s ease; transform-origin:center; } .asi-el .quickItem:hover .qBadge:not(.phone) img { transform:scale(1.22); } .asi-el .serviceCard { transition:transform .22s ease, box-shadow .22s ease; } .asi-el .serviceCard:hover { transform:translateY(-6px); box-shadow:0 24px 58px rgba(0,39,70,.16); } .asi-el .servicePhoto, .asi-el .servicePhoto img { clip-path:none !important; } .asi-el .serviceCard:after { background:var(--blue) !important; z-index:1; } .asi-el .serviceCard:before { content:""; position:absolute; top:0; left:0; width:42%; height:8px; background:var(--yellow); clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%); z-index:2; } .asi-el .audCard, .asi-el .audCard img { clip-path:none !important; } .asi-el .audTag { display:none !important; } .asi-el .audCard { transition:transform .22s ease, box-shadow .22s ease; } .asi-el .audCard:hover { transform:translateY(-5px); box-shadow:0 24px 58px rgba(0,0,0,.18); } .asi-el .contactItem.emergencyContact { background:var(--navy-deep) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 22px 52px rgba(0,39,70,.22) !important; } .asi-el .contactItem.emergencyContact b { color:var(--yellow) !important; } .asi-el .contactItem.emergencyContact span { color:#D7ECF8 !important; font-size:17px; font-weight:850; } .asi-el .contactItem.emergencyContact:after { content:"24/7"; position:absolute; top:16px; right:24px; color:var(--yellow); font-weight:950; font-size:18px; } .asi-el .footer { padding:100px 0 34px !important; clip-path:polygon(0 10%,100% 0,100% 100%,0 100%) !important; } .asi-el .footer:before, .asi-el .footer:after, .asi-el .footerSkyline { display:none !important; } .asi-el .footerGrid { grid-template-columns:1.45fr .7fr .7fr !important; } .asi-el .footerLogoPlate { background:var(--navy-deep) !important; } .asi-el .socials span { background:var(--navy-deep) !important; border-color:var(--navy-deep) !important; color:#fff !important; } .asi-el .footerColumn h3 { color:var(--navy-deep) !important; } .asi-el .footerColumn a { color:#123956 !important; } .asi-el .footerColumn a:hover { color:var(--navy-deep) !important; text-decoration:underline; text-decoration-thickness:3px; text-decoration-color:var(--blue); text-underline-offset:5px; } .asi-el .careerFooter { background:none !important; color:#123956 !important; padding:9px 0 !important; margin-top:0 !important; display:block !important; width:auto !important; text-transform:none !important; letter-spacing:normal !important; font-size:17px !important; clip-path:none !important; box-shadow:none !important; } .asi-el .phoneButton { background:rgba(255,255,255,.46) !important; border:1px solid rgba(0,39,70,.16) !important; } @media (max-width: 900px){ .asi-el .logoBox { width:210px !important; } .asi-el .footerGrid { grid-template-columns:1fr !important; gap:32px !important; } } /* Feinschliff V5.2 */ .asi-el .heroInset { display:none !important; } .asi-el .heroSlash { display:none !important; } .asi-el .heroVisual { min-height:520px !important; } .asi-el .heroPhoto { bottom:auto !important; top:0 !important; } .asi-el .btn { cursor:pointer; position:relative; overflow:hidden; transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease; } .asi-el .btn:before { content:""; position:absolute; inset:0 auto 0 -60%; width:42%; background:linear-gradient(110deg, transparent, rgba(255,255,255,.42), transparent); transform:skewX(-18deg); transition:left .45s ease; pointer-events:none; } .asi-el .btn:hover { transform:translateY(-3px); box-shadow:0 22px 46px rgba(0,39,70,.20); } .asi-el .btn:hover:before { left:118%; } .asi-el .btn.primary:hover { background:#FFE167; } .asi-el .btn.secondary:hover { border-color:var(--yellow); background:rgba(255,209,28,.14); color:#fff; } .asi-el .btn.blue:hover { background:#005284; } .asi-el .career:hover { transform:translateY(-2px); box-shadow:0 18px 34px rgba(255,209,28,.24); } /* leichte Scroll-Reveals */ .asi-el .reveal { opacity:0; transform:translateY(28px); transition:opacity .68s ease, transform .68s ease; will-change:opacity, transform; } .asi-el .reveal.in-view { opacity:1; transform:translateY(0); } .asi-el .serviceCard.reveal, .asi-el .audCard.reveal, .asi-el .proofTile.reveal, .asi-el .newsCard.reveal, .asi-el .contactItem.reveal { transition:opacity .68s ease, transform .68s ease, box-shadow .22s ease; } .asi-el .reveal.delay-1 { transition-delay:.08s; } .asi-el .reveal.delay-2 { transition-delay:.16s; } .asi-el .reveal.delay-3 { transition-delay:.24s; } .asi-el .reveal.delay-4 { transition-delay:.32s; } /* Kontakt/Footer Übergang sauberer */ .asi-el .contact { padding-bottom:138px !important; } .asi-el .footer { margin-top:0 !important; padding:114px 0 34px !important; clip-path:none !important; overflow:visible !important; } .asi-el .footer:before { content:"" !important; display:block !important; position:absolute !important; left:0 !important; right:0 !important; top:-58px !important; height:72px !important; background:var(--yellow) !important; clip-path:polygon(0 54%, 100% 0, 100% 100%, 0 100%) !important; opacity:1 !important; } .asi-el .footer:after, .asi-el .footerSkyline { display:none !important; } .asi-el .phoneButton { background:none !important; border:none !important; padding:9px 0 !important; margin:0 !important; clip-path:none !important; box-shadow:none !important; } .asi-el .phoneButton:hover { background:none !important; } /* Warum-ASI-Trapeze klarer und ruhiger */ .asi-el .logoProof { gap:24px !important; } .asi-el .logoProof:before { opacity:.45 !important; } .asi-el .proofTile { background:#fff !important; color:var(--ink) !important; border:2px solid rgba(0,159,227,.28) !important; box-shadow:0 16px 42px rgba(0,39,70,.10) !important; clip-path:polygon(8% 0, 100% 0, 92% 100%, 0 100%) !important; transform:none !important; overflow:hidden !important; } .asi-el .proofTile:nth-child(2), .asi-el .proofTile:nth-child(3), .asi-el .proofTile:nth-child(5) { background:#fff !important; color:var(--ink) !important; transform:none !important; } .asi-el .proofTile:before { content:""; position:absolute; inset:0; background:linear-gradient(125deg, rgba(0,159,227,.10), rgba(255,255,255,0) 62%); z-index:0; } .asi-el .proofTile:after { content:"" !important; position:absolute !important; left:0 !important; top:0 !important; width:46% !important; height:8px !important; background:var(--yellow) !important; transform:none !important; clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%) !important; z-index:1 !important; } .asi-el .proofTile small, .asi-el .proofTile strong, .asi-el .proofTile span { position:relative; z-index:2; } .asi-el .proofTile small { color:var(--blue) !important; opacity:1 !important; } .asi-el .proofTile strong { color:var(--navy-deep) !important; } .asi-el .proofTile span { color:#536A7D !important; } .asi-el .proofTile.statTile strong { color:var(--navy-deep) !important; } .asi-el .proofTile:hover { transform:translateY(-5px) !important; border-color:rgba(0,159,227,.45) !important; box-shadow:0 24px 58px rgba(0,39,70,.16) !important; } @media (prefers-reduced-motion: reduce){ .asi-el .reveal, .asi-el .reveal.in-view, .asi-el .btn, .asi-el .serviceCard, .asi-el .audCard, .asi-el .proofTile { transition:none !important; transform:none !important; opacity:1 !important; } } /* Feinschliff V5.3: Footer-Hover, Kontakt-Boxen, Navigation */ .asi-el .footerColumn a { position:relative !important; display:block !important; width:max-content; max-width:100%; text-decoration:none !important; transition:color .18s ease, transform .18s ease; } .asi-el .footerColumn a::after { content:""; position:absolute; left:0; bottom:3px; width:0; height:4px; background:var(--blue); clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%); transition:width .22s ease; } .asi-el .footerColumn a:hover { color:var(--navy-deep) !important; text-decoration:none !important; transform:translateX(3px); } .asi-el .footerColumn a:hover::after { width:calc(100% + 12px); } .asi-el .phoneButton, .asi-el .phoneButton:hover { background:none !important; border:none !important; padding:9px 0 !important; margin:0 !important; clip-path:none !important; box-shadow:none !important; } .asi-el .contactItem.contactLink { display:block; cursor:pointer; overflow:hidden; transition:opacity .68s ease, transform .24s ease, box-shadow .24s ease, border-color .24s ease, background-color .24s ease; } .asi-el .contactItem.contactLink::before { content:""; position:absolute; inset:0 auto 0 -58%; width:38%; background:linear-gradient(110deg, transparent, rgba(0,159,227,.12), transparent); transform:skewX(-18deg); transition:left .45s ease; pointer-events:none; } .asi-el .contactItem.contactLink::after { transition:transform .22s ease, color .22s ease; } .asi-el .contactItem.contactLink:not(.emergencyContact):hover { transform:translateY(-6px); border-color:rgba(0,159,227,.34); box-shadow:0 24px 58px rgba(0,39,70,.14); background:#fbfdff; } .asi-el .contactItem.contactLink:hover::before { left:118%; } .asi-el .contactItem.contactLink:not(.emergencyContact):hover b { color:var(--blue); } .asi-el .contactItem.contactLink:not(.emergencyContact):hover span { color:var(--navy-deep); } .asi-el .contactItem.emergencyContact.contactLink:hover { transform:translateY(-6px); box-shadow:0 30px 70px rgba(0,39,70,.30) !important; } .asi-el .contactItem.emergencyContact.contactLink:hover:after { transform:translateX(-4px) skewX(-8deg); } .asi-el .contactItem.contactLink span { transition:color .22s ease; } /* Feinschliff V5.4: dynamisches Notfall-Faehnchen */ .asi-el .emergencyFlag { cursor:pointer; transition:width .26s ease, transform .26s ease, box-shadow .26s ease, background .26s ease, filter .26s ease; overflow:hidden; isolation:isolate; } .asi-el .emergencyFlag::before { content:""; position:absolute; left:0; top:0; bottom:0; width:9px; background:var(--yellow); transform:skewY(-12deg); transform-origin:top left; transition:width .26s ease; z-index:-1; } .asi-el .emergencyFlag::after { content:"Jetzt anrufen"; position:absolute; left:50%; bottom:18px; transform:translateX(-50%) rotate(180deg); writing-mode:vertical-rl; color:var(--navy-deep); background:var(--yellow); padding:9px 6px; font-size:10px; font-weight:950; text-transform:uppercase; letter-spacing:.08em; opacity:0; clip-path:polygon(0 0, 100% 0, 82% 100%, 0 100%); transition:opacity .22s ease, bottom .26s ease; pointer-events:none; } .asi-el .emergencyFlag:hover { width:104px; transform:translateX(-8px); background:linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%); box-shadow:0 28px 68px rgba(0,39,70,.34); filter:saturate(1.06); } .asi-el .emergencyFlag:hover::before { width:18px; } .asi-el .emergencyFlag:hover::after { opacity:1; bottom:24px; } .asi-el .emergencyFlag:hover div { transform:rotate(180deg) translateX(8px); letter-spacing:.11em; } .asi-el .emergencyFlag div { transition:transform .26s ease, letter-spacing .26s ease; } .asi-el .emergencyFlag:focus-visible { outline:4px solid var(--yellow); outline-offset:4px; } @media (prefers-reduced-motion: reduce){ .asi-el .emergencyFlag, .asi-el .emergencyFlag::before, .asi-el .emergencyFlag::after, .asi-el .emergencyFlag div { transition:none !important; } } /* Feinschliff V5.5: Notfall-Faehnchen nur blau, Hover-Text ohne Zusatzform */ .asi-el .emergencyFlag { cursor:pointer; transition:width .26s ease, transform .26s ease, box-shadow .26s ease, background .26s ease, filter .26s ease; overflow:hidden; isolation:isolate; background:linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%) !important; } .asi-el .emergencyFlag::before { content:none !important; } .asi-el .emergencyFlag::after { content:"Jetzt anrufen"; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(180deg); writing-mode:vertical-rl; color:#fff; background:transparent; padding:0; font-size:11px; font-weight:950; text-transform:uppercase; letter-spacing:.10em; opacity:0; clip-path:none; transition:opacity .22s ease, transform .26s ease, letter-spacing .26s ease; pointer-events:none; white-space:nowrap; } .asi-el .emergencyFlag:hover { width:104px; transform:translateX(-8px); background:linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%) !important; box-shadow:0 28px 68px rgba(0,39,70,.34); filter:saturate(1.06); } .asi-el .emergencyFlag:hover::after { opacity:1; transform:translate(-50%, -50%) rotate(180deg) scale(1.03); } .asi-el .emergencyFlag:hover div { opacity:0; transform:rotate(180deg) translateX(12px); } .asi-el .emergencyFlag div { transition:transform .26s ease, letter-spacing .26s ease, opacity .18s ease; } .asi-el .emergencyFlag:focus-visible { outline:4px solid var(--blue-light); outline-offset:4px; } @media (prefers-reduced-motion: reduce){ .asi-el .emergencyFlag, .asi-el .emergencyFlag::before, .asi-el .emergencyFlag::after, .asi-el .emergencyFlag div { transition:none !important; } } /* Feinschliff V5.6: CTA-Aktionen, Footer-Hover und Kontaktboxen */ .asi-el { scroll-behavior:smooth; } .asi-el .heroBtns .btn { position:relative; overflow:hidden; } .asi-el .heroBtns .btn::after, .asi-el .ctaPanel .btn::after, .asi-el .quickItem::after { content:""; position:absolute; inset:0 auto 0 -60%; width:42%; background:linear-gradient(110deg, transparent, rgba(255,255,255,.32), transparent); transform:skewX(-18deg); transition:left .42s ease; pointer-events:none; } .asi-el .heroBtns .btn:hover::after, .asi-el .ctaPanel .btn:hover::after, .asi-el .quickItem:hover::after { left:118%; } .asi-el .footerColumn a { position:relative !important; text-decoration:none !important; } .asi-el .footerColumn a::after { content:"" !important; position:absolute !important; left:0 !important; bottom:2px !important; width:0 !important; height:4px !important; background:var(--blue) !important; clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%) !important; transition:width .22s ease, transform .22s ease !important; } .asi-el .footerColumn a:hover { text-decoration:none !important; transform:translateX(3px); } .asi-el .footerColumn a:hover::after { width:calc(100% + 14px) !important; } .asi-el .contactItem.contactLink { position:relative; isolation:isolate; } .asi-el .contactItem.contactLink b, .asi-el .contactItem.contactLink span { position:relative; z-index:2; } .asi-el .contactItem.contactLink::before { z-index:1; } .asi-el .contactItem.contactLink:not(.emergencyContact):hover { transform:translateY(-8px) scale(1.015); border-color:rgba(0,159,227,.42) !important; box-shadow:0 28px 70px rgba(0,39,70,.16) !important; } .asi-el .contactItem.contactLink:not(.emergencyContact):hover span { color:var(--navy-deep) !important; text-decoration:underline; text-decoration-color:var(--blue); text-decoration-thickness:2px; text-underline-offset:4px; } .asi-el .contactItem.contactLink[href^="tel"]:not(.emergencyContact):hover span, .asi-el .contactItem.contactLink[href^="mailto"]:hover span, .asi-el .contactItem.contactLink[href="#kontaktformular"]:hover span { font-weight:850; } .asi-el .contactItem.contactLink:not(.emergencyContact)::after { content:"›"; position:absolute; right:22px; top:24px; color:var(--blue); font-size:28px; font-weight:950; opacity:0; transform:translateX(-8px); transition:opacity .2s ease, transform .2s ease; z-index:2; } .asi-el .contactItem.contactLink:not(.emergencyContact):hover::after { opacity:1; transform:translateX(0); } /* Feinschliff V5.8: Herobild, Quickbar, Zertifikat-Galerie, Karriere-Hover */ .asi-el .heroPhoto { width:790px !important; height:430px !important; top:30px !important; right:-110px !important; } .asi-el .heroPhoto img { object-position:center center !important; } .asi-el .quickGrid { clip-path:none !important; overflow:visible !important; } .asi-el .quickItem { position:relative !important; overflow:hidden !important; } .asi-el .qBadge { width:72px !important; height:72px !important; flex:0 0 72px !important; clip-path:none !important; border-radius:0 !important; transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease, background-color .24s ease !important; } .asi-el .qBadge.phone { clip-path:none !important; border-radius:0 !important; } .asi-el .qBadge:not(.phone) img { max-width:62px !important; max-height:62px !important; } .asi-el .quickItem:hover .qBadge { transform:scale(1.07); box-shadow:0 14px 34px rgba(0,39,70,.14); border-color:rgba(0,159,227,.35); } .asi-el .quickItem:hover .qBadge.phone { background:#004575 !important; } .asi-el .qBadge.certBadge { width:92px !important; height:92px !important; flex:0 0 92px !important; background:#fff !important; border:1px solid rgba(0,39,70,.10) !important; box-shadow:0 10px 30px rgba(0,39,70,.08); overflow:visible !important; cursor:zoom-in; } .asi-el .qBadge.certBadge img { max-width:86px !important; max-height:86px !important; width:auto !important; height:auto !important; object-fit:contain !important; transform-origin:center center; } .asi-el .quickItem:hover .qBadge.certBadge img { transform:scale(1.14) !important; } .asi-el .certLightbox { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:48px; background:rgba(0,39,70,.78); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .22s ease; } .asi-el .certLightbox.open { opacity:1; pointer-events:auto; } .asi-el .certLightbox__panel { position:relative; max-width:min(760px, 90vw); max-height:84vh; background:#fff; padding:34px; box-shadow:0 36px 90px rgba(0,0,0,.32); transform:translateY(16px) scale(.96); transition:transform .25s ease; } .asi-el .certLightbox.open .certLightbox__panel { transform:translateY(0) scale(1); } .asi-el .certLightbox__panel img { display:block; max-width:100%; max-height:72vh; object-fit:contain; } .asi-el .certLightbox__close { position:absolute; top:-18px; right:-18px; width:46px; height:46px; border:0; border-radius:50%; background:var(--yellow); color:var(--navy-deep); font-size:26px; font-weight:900; line-height:1; cursor:pointer; box-shadow:0 14px 30px rgba(0,0,0,.24); } .asi-el .career { position:relative !important; overflow:hidden !important; transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease !important; } .asi-el .career::before { content:""; position:absolute; inset:0 auto 0 -60%; width:42%; background:linear-gradient(110deg, transparent, rgba(255,255,255,.48), transparent); transform:skewX(-18deg); transition:left .45s ease; pointer-events:none; } .asi-el .career:hover { transform:translateY(-3px) !important; background:#FFE167 !important; box-shadow:0 22px 46px rgba(0,39,70,.20) !important; } .asi-el .career:hover::before { left:118%; } @media (max-width:900px){ .asi-el .heroPhoto { width:100% !important; height:360px !important; top:20px !important; right:0 !important; } .asi-el .qBadge.certBadge { width:78px !important; height:78px !important; flex-basis:78px !important; } .asi-el .qBadge.certBadge img { max-width:72px !important; max-height:72px !important; } } /* Feinschliff V5.9: Herobild kompakter, Unterkante bleibt ausgerichtet */ .asi-el .heroPhoto { width:630px !important; height:430px !important; top:30px !important; right:0 !important; } @media (max-width: 900px){ .asi-el .heroPhoto { width:100% !important; height:360px !important; top:20px !important; right:0 !important; } } /* V5.10 – Hover-Effekt Leistungen + gerade News-Bilder */ .asi-el .serviceGrid, .asi-el .serviceGridExpanded { overflow: visible; } .asi-el .serviceCard { transform-origin:center center; will-change:transform; z-index:1; } .asi-el .serviceCard:hover { transform:translateY(-6px) scale(1.035) !important; box-shadow:0 28px 64px rgba(0,39,70,.18) !important; z-index:4; } .asi-el .serviceCard:hover .servicePhoto img { transform:scale(1.04); } .asi-el .servicePhoto img { transition:transform .28s ease; } .asi-el .newsCard, .asi-el .newsImg, .asi-el .newsImg img { clip-path:none !important; } .asi-el .newsImg { overflow:hidden; } /* V5.11 – News nebeneinander gleich groß */ .asi-el .newsGrid { grid-template-columns:repeat(3, 1fr) !important; align-items:stretch !important; } .asi-el .newsCard { height:100% !important; display:flex !important; flex-direction:column !important; } .asi-el .newsImg, .asi-el .newsCard:not(.feature) .newsImg { height:220px !important; flex:0 0 220px !important; } .asi-el .newsBody { flex:1 1 auto !important; display:flex !important; flex-direction:column !important; } .asi-el .newsBody p { flex:1 1 auto; } .asi-el .newsMore { margin-top:auto !important; } .asi-el .newsCard.award .newsImg img { width:100% !important; height:100% !important; } @media (max-width: 900px){ .asi-el .newsGrid { grid-template-columns:1fr !important; } .asi-el .newsImg, .asi-el .newsCard:not(.feature) .newsImg { height:230px !important; flex-basis:230px !important; } } /* V5.12 – News als aufklappende Vollbreiten-Ansicht */ .asi-el .newsGrid { margin-bottom:0 !important; } .asi-el .newsCard { cursor:pointer; transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease; } .asi-el .newsCard:hover { transform:translateY(-6px); border-color:rgba(0,159,227,.34); box-shadow:0 26px 64px rgba(0,39,70,.16); } .asi-el .newsCard.is-active { border-color:var(--blue); box-shadow:0 28px 72px rgba(0,39,70,.18); } .asi-el .newsCard.is-active .newsMore { color:var(--blue); } .asi-el .newsMore { transition:color .2s ease; } .asi-el .newsCard:focus-visible { outline:4px solid var(--yellow); outline-offset:6px; } .asi-el .newsExpandPanel { display:grid; grid-template-columns:0.82fr 1.18fr; gap:42px; align-items:stretch; width:100%; max-height:0; opacity:0; overflow:hidden; margin-top:0; background:linear-gradient(120deg,#f7fbfd 0%, #ffffff 100%); border:1px solid var(--line); box-shadow:0 26px 70px rgba(0,39,70,.13); transform:translateY(-8px); transition:max-height .44s ease, opacity .28s ease, transform .32s ease, margin-top .28s ease; } .asi-el .newsExpandPanel.open { max-height:620px; opacity:1; margin-top:28px; transform:translateY(0); } .asi-el .newsExpandPanel__image { min-height:320px; background:#eaf2f7; overflow:hidden; } .asi-el .newsExpandPanel__image img { width:100%; height:100%; object-fit:cover; display:block; } .asi-el .newsExpandPanel__content { padding:42px 48px 40px 0; position:relative; } .asi-el .newsExpandPanel__eyebrow { color:var(--blue); font-size:12px; font-weight:950; text-transform:uppercase; letter-spacing:.16em; margin-bottom:12px; } .asi-el .newsExpandPanel__title { font-size:34px; line-height:1.08; letter-spacing:-.035em; color:var(--navy-deep); margin-bottom:16px; } .asi-el .newsExpandPanel__text { color:#516779; font-size:17px; line-height:1.68; max-width:650px; } .asi-el .newsExpandPanel__meta { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; } .asi-el .newsExpandPanel__tag { background:#eef7fc; color:var(--navy); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; padding:10px 14px; } .asi-el .newsExpandPanel__close { position:absolute; right:26px; top:24px; border:0; background:var(--navy-deep); color:#fff; width:42px; height:42px; font-size:28px; line-height:1; cursor:pointer; transition:transform .2s ease, background .2s ease; } .asi-el .newsExpandPanel__close:hover { transform:scale(1.08); background:var(--blue); } .asi-el .newsExpandPanel__hint { margin-top:18px; color:var(--muted); font-size:14px; } @media (max-width:900px){ .asi-el .newsExpandPanel, .asi-el .newsExpandPanel.open { grid-template-columns:1fr; max-height:900px; } .asi-el .newsExpandPanel__image { min-height:220px; } .asi-el .newsExpandPanel__content { padding:32px 28px 34px; } } /* V5.13 – News-Feinschliff: CTA-Abstand + Spendenbild formatfüllend */ .asi-el .newsGrid { align-items:stretch !important; } .asi-el .newsCard { min-height:100% !important; } .asi-el .newsMore { margin-top:24px !important; } .asi-el .newsCard.award .newsBody p { margin-bottom:4px !important; } .asi-el .newsCard:nth-child(2) .newsImg { background:#dfe9ef !important; } .asi-el .newsCard:nth-child(2) .newsImg img { object-fit:cover !important; object-position:center center !important; transform:scale(1.18); transition:transform .28s ease; } .asi-el .newsCard:nth-child(2):hover .newsImg img { transform:scale(1.22); } /* V5.15 – dezente Header-Load-Animation */ @keyframes heroFadeUp{ from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } } @keyframes heroPhotoReveal{ from { opacity:0; transform:translateX(34px) scale(.975); filter:saturate(.85) contrast(1.02); } to { opacity:1; transform:translateX(0) scale(1); filter:saturate(1) contrast(1); } } @keyframes heroPhotoSoftZoom{ from { transform:scale(1.035); } to { transform:scale(1); } } @keyframes heroGlowIn{ from { opacity:0; transform:scale(.92); } to { opacity:.18; transform:scale(1); } } .asi-el .heroCopy .eyebrow, .asi-el .heroCopy h1, .asi-el .heroCopy .lead, .asi-el .heroBtns, .asi-el .metrics .metric { opacity:0; animation:heroFadeUp .72s cubic-bezier(.2,.72,.2,1) forwards; } .asi-el .heroCopy .eyebrow { animation-delay:.08s; } .asi-el .heroCopy h1 { animation-delay:.18s; } .asi-el .heroCopy .lead { animation-delay:.30s; } .asi-el .heroBtns { animation-delay:.42s; } .asi-el .metrics .metric:nth-child(1) { animation-delay:.54s; } .asi-el .metrics .metric:nth-child(2) { animation-delay:.62s; } .asi-el .metrics .metric:nth-child(3) { animation-delay:.70s; } .asi-el .heroPhoto { opacity:0; animation:heroPhotoReveal .86s cubic-bezier(.2,.72,.2,1) .28s forwards; } .asi-el .heroPhoto img { transform:scale(1.035); animation:heroPhotoSoftZoom 1.6s cubic-bezier(.2,.72,.2,1) .32s forwards; transform-origin:center center; } .asi-el .hero:after { animation:heroGlowIn 1.2s ease .26s both; } @media (prefers-reduced-motion: reduce){ .asi-el .heroCopy .eyebrow, .asi-el .heroCopy h1, .asi-el .heroCopy .lead, .asi-el .heroBtns, .asi-el .metrics .metric, .asi-el .heroPhoto, .asi-el .heroPhoto img, .asi-el .hero:after { animation:none !important; opacity:1 !important; transform:none !important; } } /* V6 – Footer-Socials nur Outline-Icons ohne Rahmen */ .asi-el .socials { display:flex !important; gap:18px !important; align-items:center !important; margin-top:0 !important; } .asi-el .socials span { width:auto !important; height:auto !important; min-width:0 !important; min-height:0 !important; display:inline-grid !important; place-items:center !important; padding:0 !important; margin:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; clip-path:none !important; color:var(--navy-deep) !important; transition:transform .22s ease, color .22s ease !important; } .asi-el .socials span svg { width:27px !important; height:27px !important; display:block !important; fill:none !important; stroke:currentColor !important; stroke-width:1.9 !important; stroke-linecap:round !important; stroke-linejoin:round !important; overflow:visible !important; } .asi-el .socials span:hover { transform:translateY(-3px) scale(1.08) !important; background:transparent !important; border:0 !important; color:var(--blue) !important; } @media (prefers-reduced-motion: reduce){ .asi-el .socials span { transition:none !important; } } /* ========================================================= DESIGNROUTE B – gleicher Inhalt, neues Look & Feel Konzept: Editorial Corporate Hub, hell, ruhig, modular, mit ASI-Farbwelt, klaren Layern und weniger schrägen Flächen. ========================================================= */ .asi-el { --routeb-bg:#F2F7FA; --routeb-card:#FFFFFF; --routeb-ice:#EAF7FF; --routeb-ink:#07243D; --routeb-muted:#61788C; --routeb-radius:30px; --routeb-radius-sm:18px; --routeb-shadow:0 28px 80px rgba(0,39,70,.13); --routeb-shadow-soft:0 14px 38px rgba(0,39,70,.08); } .asi-el, .asi-el { background:linear-gradient(180deg,#dfeaf1 0%,#f5f9fb 48%,#e8f1f6 100%) !important; } .asi-el { max-width:1440px !important; background:var(--routeb-bg) !important; overflow:hidden !important; } .asi-el .wrap, .asi-el .nav { width:min(1190px, calc(100% - 64px)) !important; } .asi-el .eyebrow { color:var(--navy) !important; letter-spacing:.18em !important; font-size:11px !important; } .asi-el h1 { font-size:clamp(54px,5.2vw,76px) !important; line-height:.92 !important; letter-spacing:-.07em !important; } .asi-el h2 { font-size:clamp(38px,4vw,58px) !important; line-height:1 !important; letter-spacing:-.06em !important; color:var(--routeb-ink) !important; } .asi-el h3 { letter-spacing:-.02em !important; } .asi-el .txt, .asi-el .headrow p, .asi-el .serviceBody p, .asi-el .audCard p, .asi-el .newsBody p, .asi-el .contactPanel p, .asi-el .whyIntro p { color:var(--routeb-muted) !important; } .asi-el .btn { border-radius:999px !important; clip-path:none !important; height:auto !important; min-height:50px !important; padding:15px 24px !important; box-shadow:none !important; } .asi-el .btn.primary, .asi-el .btn-blue, .asi-el .btn.blue { background:var(--navy-deep) !important; color:#fff !important; } .asi-el .btn.primary::before, .asi-el .btn.secondary::before, .asi-el .btn.blue::before { border-radius:999px !important; } .asi-el .btn.primary:hover, .asi-el .btn.blue:hover { background:var(--blue) !important; box-shadow:0 18px 42px rgba(0,159,227,.24) !important; } .asi-el .btn.secondary { border:1px solid rgba(0,55,96,.16) !important; background:#fff !important; color:var(--navy-deep) !important; } .asi-el .btn.secondary:hover { border-color:var(--blue) !important; color:var(--navy-deep) !important; background:#fff !important; } /* Header als schwebende, helle Navigationsleiste */ .asi-el .header { height:104px !important; background:transparent !important; position:absolute !important; left:0 !important; right:0 !important; top:0 !important; z-index:20 !important; color:var(--navy-deep) !important; } .asi-el .header:after { display:none !important; } .asi-el .nav { height:104px !important; } .asi-el .logoBox { background:#fff !important; border-radius:22px !important; clip-path:none !important; box-shadow:0 18px 50px rgba(0,39,70,.14) !important; width:236px !important; height:74px !important; } .asi-el .logoBox img { max-width:198px !important; } .asi-el .brand small { color:var(--navy-deep) !important; opacity:.74 !important; } .asi-el .brandLine { background:rgba(0,39,70,.16) !important; } .asi-el .navlinks { gap:24px !important; color:var(--navy-deep) !important; } .asi-el .navlinks a:not(.career) { padding:10px 0 !important; opacity:.86 !important; } .asi-el .navlinks a:not(.career):hover { opacity:1 !important; color:var(--navy-deep) !important; } .asi-el .navlinks a:not(.career):after { bottom:3px !important; height:3px !important; background:var(--blue) !important; border-radius:99px !important; clip-path:none !important; } .asi-el .career { background:var(--yellow) !important; color:var(--navy-deep) !important; border-radius:999px !important; clip-path:none !important; padding:14px 22px !important; } /* Hero: helle Corporate-Buehne mit Split-Card statt dunkler Vollflaeche */ .asi-el .hero { min-height:790px !important; padding-top:104px !important; color:var(--routeb-ink) !important; background: radial-gradient(circle at 87% 20%, rgba(0,159,227,.18), transparent 32%), linear-gradient(135deg,#F7FBFD 0%,#EAF4FA 52%,#DDECF4 100%) !important; } .asi-el .hero:before { content:"" !important; position:absolute !important; inset:auto auto -160px -160px !important; width:460px !important; height:460px !important; border-radius:50% !important; background:rgba(255,209,28,.42) !important; filter:blur(0) !important; z-index:0 !important; } .asi-el .hero:after { content:"" !important; position:absolute !important; right:-180px !important; top:80px !important; width:640px !important; height:640px !important; border-radius:50% !important; background:rgba(0,159,227,.12) !important; transform:none !important; opacity:1 !important; z-index:0 !important; } .asi-el .hero .wrap { grid-template-columns:530px 1fr !important; gap:80px !important; padding:92px 0 74px !important; z-index:2 !important; } .asi-el .heroCopy { padding-top:32px !important; } .asi-el .heroCopy .eyebrow { display:inline-flex !important; align-items:center !important; gap:10px !important; background:#fff !important; color:var(--navy) !important; padding:9px 14px !important; border-radius:999px !important; box-shadow:var(--routeb-shadow-soft) !important; } .asi-el .hero h1 { color:var(--routeb-ink) !important; max-width:620px !important; } .asi-el .hero .lead { color:#4F6678 !important; font-size:20px !important; max-width:570px !important; } .asi-el .heroBtns { gap:14px !important; } .asi-el .heroVisual { min-height:540px !important; } .asi-el .heroPhoto { top:10px !important; right:-10px !important; width:640px !important; height:500px !important; border-radius:var(--routeb-radius) !important; clip-path:none !important; overflow:hidden !important; box-shadow:var(--routeb-shadow) !important; border:10px solid #fff !important; } .asi-el .heroPhoto:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(0,39,70,.22)); pointer-events:none; } .asi-el .heroPhoto img { filter:saturate(.96) contrast(1.02) !important; } .asi-el .metrics { position:absolute !important; left:-76px !important; bottom:10px !important; width:510px !important; margin:0 !important; display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:10px !important; z-index:4 !important; } .asi-el .metric { background:#fff !important; border:1px solid rgba(0,39,70,.08) !important; border-top:0 !important; border-radius:20px !important; padding:18px 16px !important; box-shadow:var(--routeb-shadow-soft) !important; } .asi-el .metric strong { color:var(--blue) !important; font-size:31px !important; } .asi-el .metric span { color:#60798C !important; } .asi-el .heroSlash { display:none !important; } /* Notfall-Faehnchen als kompakter Floating Pill */ .asi-el .emergencyFlag { top:auto !important; right:28px !important; bottom:28px !important; width:auto !important; min-height:auto !important; height:58px !important; padding:0 22px !important; border-radius:999px !important; clip-path:none !important; background:var(--navy-deep) !important; box-shadow:0 18px 50px rgba(0,39,70,.24) !important; } .asi-el .emergencyFlag div { writing-mode:horizontal-tb !important; transform:none !important; letter-spacing:.04em !important; font-size:12px !important; white-space:nowrap !important; } .asi-el .emergencyFlag:hover { width:auto !important; transform:translateY(-4px) !important; } .asi-el .emergencyFlag:hover div { opacity:1 !important; transform:none !important; } .asi-el .emergencyFlag::after { display:none !important; } /* Quickbar: Badge-Leiste als runde Info-Karten */ .asi-el .quick { margin-top:-46px !important; } .asi-el .quickGrid { grid-template-columns:1.1fr 1fr 1fr 1fr !important; gap:14px !important; background:transparent !important; box-shadow:none !important; clip-path:none !important; } .asi-el .quickItem { min-height:128px !important; background:#fff !important; border:1px solid rgba(0,39,70,.08) !important; border-radius:24px !important; padding:22px !important; box-shadow:var(--routeb-shadow-soft) !important; overflow:hidden !important; } .asi-el .quickItem:hover { transform:translateY(-8px) !important; box-shadow:0 26px 60px rgba(0,39,70,.14) !important; } .asi-el .qBadge { border-radius:18px !important; clip-path:none !important; background:var(--routeb-ice) !important; } .asi-el .qBadge.phone { background:var(--navy-deep) !important; color:#fff !important; } .asi-el .qBadge.certBadge { border-radius:20px !important; } /* Sections */ .asi-el .section { padding:104px 0 !important; } .asi-el .section.soft { background:#EAF3F8 !important; } .asi-el .services { background:#fff !important; border-radius:46px 46px 0 0 !important; padding-top:110px !important; } .asi-el .serviceTop { text-align:left !important; max-width:760px !important; margin:0 0 52px !important; } .asi-el .serviceGridExpanded, .asi-el .serviceGrid { display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:20px !important; } .asi-el .serviceCard { min-height:338px !important; border:1px solid rgba(0,39,70,.08) !important; border-radius:28px !important; clip-path:none !important; overflow:hidden !important; box-shadow:var(--routeb-shadow-soft) !important; background:#fff !important; } .asi-el .serviceCard:before, .asi-el .serviceCard:after { display:none !important; } .asi-el .serviceCard:hover { transform:translateY(-8px) scale(1.02) !important; box-shadow:0 30px 70px rgba(0,39,70,.16) !important; } .asi-el .servicePhoto { height:168px !important; clip-path:none !important; border-radius:22px !important; margin:12px 12px 0 !important; } .asi-el .servicePhoto img { border-radius:22px !important; } .asi-el .serviceBody { padding:22px 24px 26px !important; } .asi-el .serviceBody h3 { font-size:20px !important; } .asi-el .serviceMore { color:var(--blue) !important; } /* Zielgruppen: horizontale dunkle Story-Cards */ .asi-el .audience { background:var(--navy-deep) !important; padding:108px 0 !important; border-radius:0 0 46px 46px !important; } .asi-el .audience:before { display:none !important; } .asi-el .audience h2 { color:#fff !important; } .asi-el .audGrid { grid-template-columns:repeat(4,1fr) !important; gap:18px !important; } .asi-el .audCard { height:340px !important; border-radius:30px !important; clip-path:none !important; padding:24px !important; } .asi-el .audCard img { clip-path:none !important; opacity:.62 !important; filter:saturate(.75) contrast(1.04) !important; } .asi-el .audCard:after { background:linear-gradient(180deg,rgba(0,39,70,.05),rgba(0,39,70,.88)) !important; } .asi-el .audCard:hover { transform:translateY(-8px) !important; } /* Warum ASI: helle Proof-Matrix */ .asi-el .why { background:linear-gradient(180deg,#F4F9FC,#fff) !important; } .asi-el .whyGrid { grid-template-columns:430px 1fr !important; gap:70px !important; align-items:center !important; } .asi-el .logoProof { gap:18px !important; } .asi-el .logoProof:before { display:none !important; } .asi-el .proofTile { min-height:172px !important; border-radius:28px !important; clip-path:none !important; border:1px solid rgba(0,39,70,.08) !important; box-shadow:var(--routeb-shadow-soft) !important; background:#fff !important; } .asi-el .proofTile:before { background:radial-gradient(circle at 100% 0, rgba(0,159,227,.12), transparent 48%) !important; } .asi-el .proofTile:after { height:5px !important; width:100% !important; clip-path:none !important; background:linear-gradient(90deg,var(--yellow),var(--blue)) !important; } .asi-el .proofTile small { color:var(--blue) !important; } .asi-el .proofTile strong { color:var(--navy-deep) !important; font-size:40px !important; } .asi-el .proofTile:hover { transform:translateY(-8px) !important; } /* News: Magazinartige Karten */ .asi-el .news { background:#fff !important; padding:108px 0 !important; } .asi-el .newsGrid { grid-template-columns:repeat(3,1fr) !important; gap:20px !important; } .asi-el .newsCard { border:1px solid rgba(0,39,70,.08) !important; border-radius:30px !important; clip-path:none !important; overflow:hidden !important; box-shadow:var(--routeb-shadow-soft) !important; } .asi-el .newsImg { height:230px !important; flex-basis:230px !important; border-radius:24px !important; margin:12px 12px 0 !important; overflow:hidden !important; } .asi-el .newsBody { padding:24px 26px 28px !important; } .asi-el .date { color:var(--blue) !important; } .asi-el .newsMore { color:var(--navy-deep) !important; } .asi-el .newsExpandPanel { border-radius:30px !important; overflow:hidden !important; border:1px solid rgba(0,39,70,.08) !important; } /* Karriere-CTA: weisse Card mit blauem Akzent */ .asi-el .careerCta { background:#F4F9FC !important; padding:104px 0 !important; } .asi-el .ctaPanel { min-height:330px !important; border-radius:34px !important; clip-path:none !important; background:#fff !important; color:var(--routeb-ink) !important; grid-template-columns:1fr 430px !important; box-shadow:var(--routeb-shadow) !important; border:1px solid rgba(0,39,70,.08) !important; } .asi-el .ctaPanel:before { content:""; position:absolute; left:0; top:0; bottom:0; width:9px; background:linear-gradient(180deg,var(--yellow),var(--blue)); } .asi-el .ctaCopy h2 { color:var(--routeb-ink) !important; } .asi-el .ctaCopy p { color:var(--routeb-muted) !important; } .asi-el .ctaImage { clip-path:none !important; border-radius:28px !important; margin:18px 18px 18px 0 !important; min-height:294px !important; } .asi-el .ctaImage img { border-radius:28px !important; } /* Kontakt: klare Direct-Action Cards */ .asi-el .contact { background:#EAF3F8 !important; padding:104px 0 136px !important; } .asi-el .contactPanel { grid-template-columns:380px 1fr !important; gap:60px !important; } .asi-el .contactGrid { gap:16px !important; } .asi-el .contactItem { border-radius:26px !important; clip-path:none !important; border:1px solid rgba(0,39,70,.08) !important; box-shadow:var(--routeb-shadow-soft) !important; } .asi-el .contactItem.emergencyContact { background:var(--navy-deep) !important; border-radius:26px !important; } .asi-el .contactItem.contactLink:not(.emergencyContact):hover { transform:translateY(-8px) !important; } /* Footer: dunkler Abschluss als hochwertiger Brand-Block */ .asi-el .footer { background:var(--navy-deep) !important; color:#D7ECF8 !important; padding:92px 0 34px !important; clip-path:none !important; margin-top:0 !important; } .asi-el .footer:before { display:none !important; } .asi-el .footerGrid { grid-template-columns:1.35fr .75fr .75fr !important; gap:64px !important; } .asi-el .footerLogoPlate { background:#fff !important; border-radius:24px !important; clip-path:none !important; box-shadow:0 18px 50px rgba(0,0,0,.18) !important; } .asi-el .footerBrandNew p, .asi-el .footerBottom, .asi-el .footerColumn a { color:#C9E4F2 !important; } .asi-el .footerColumn h3 { color:#fff !important; } .asi-el .footerColumn a:hover { color:#fff !important; } .asi-el .footerColumn a::after { background:var(--yellow) !important; } .asi-el .socials { gap:18px !important; } .asi-el .socials a, .asi-el .socials span { width:auto !important; height:auto !important; background:transparent !important; border:none !important; color:#fff !important; padding:0 !important; clip-path:none !important; } .asi-el .socials svg { width:28px !important; height:28px !important; stroke:currentColor !important; fill:none !important; stroke-width:1.8 !important; } .asi-el .footerBottom { border-top-color:rgba(255,255,255,.16) !important; } @media (max-width: 1100px){ .asi-el .hero .wrap { grid-template-columns:1fr !important; } .asi-el .heroPhoto { position:relative !important; width:100% !important; right:auto !important; } .asi-el .metrics { position:relative !important; left:auto !important; bottom:auto !important; width:100% !important; margin-top:18px !important; } .asi-el .quickGrid, .asi-el .serviceGridExpanded, .asi-el .serviceGrid, .asi-el .audGrid, .asi-el .newsGrid { grid-template-columns:1fr 1fr !important; } .asi-el .whyGrid, .asi-el .contactPanel, .asi-el .ctaPanel { grid-template-columns:1fr !important; } .asi-el .ctaImage { margin:0 18px 18px !important; } } @media (max-width: 720px){ .asi-el .wrap, .asi-el .nav { width:min(100% - 32px, 1190px) !important; } .asi-el .navlinks { display:none !important; } .asi-el .brand small, .asi-el .brandLine { display:none !important; } .asi-el .quickGrid, .asi-el .serviceGridExpanded, .asi-el .serviceGrid, .asi-el .audGrid, .asi-el .newsGrid, .asi-el .contactGrid, .asi-el .footerGrid { grid-template-columns:1fr !important; } .asi-el .metrics { grid-template-columns:1fr !important; } .asi-el .hero { min-height:auto !important; } .asi-el .hero .wrap { padding-top:58px !important; } .asi-el .heroPhoto { height:340px !important; } } /* V2 Korrekturen: Header-Abstaende, Footer-Logo, CTA-Akzent */ .asi-el .header { pointer-events:none !important; } .asi-el .header .nav, .asi-el .header .nav * { pointer-events:auto !important; } .asi-el .nav { align-items:center !important; } .asi-el .navlinks { gap:18px !important; flex-wrap:nowrap !important; white-space:nowrap !important; } .asi-el .navlinks a:not(.career) { font-size:12px !important; padding:11px 0 !important; } .asi-el .logoBox { width:218px !important; height:68px !important; flex:0 0 auto !important; } .asi-el .logoBox img { max-width:178px !important; max-height:48px !important; object-fit:contain !important; } .asi-el .brand { gap:12px !important; min-width:0 !important; } .asi-el .brand small { max-width:190px !important; line-height:1.35 !important; letter-spacing:.16em !important; } .asi-el .career { flex:0 0 auto !important; white-space:nowrap !important; } .asi-el .hero { min-height:860px !important; padding-top:104px !important; } .asi-el .hero .wrap { grid-template-columns:minmax(0,560px) minmax(0,1fr) !important; gap:54px !important; padding:126px 0 88px !important; align-items:center !important; } .asi-el .heroCopy { padding-top:0 !important; } .asi-el .hero h1 { font-size:clamp(48px,4.55vw,68px) !important; max-width:590px !important; } .asi-el .hero .lead { max-width:560px !important; } .asi-el .heroBtns { display:flex !important; flex-wrap:wrap !important; gap:14px !important; margin-bottom:0 !important; } .asi-el .heroVisual { min-height:520px !important; } .asi-el .heroPhoto { top:22px !important; right:0 !important; width:min(100%,580px) !important; height:470px !important; } .asi-el .metrics { position:static !important; left:auto !important; bottom:auto !important; width:100% !important; max-width:560px !important; margin-top:34px !important; } .asi-el .metric { min-width:0 !important; } .asi-el .ctaPanel { position:relative !important; overflow:hidden !important; } .asi-el .ctaPanel:before { left:18px !important; top:18px !important; bottom:18px !important; width:10px !important; border-radius:999px !important; } .asi-el .ctaCopy { padding-left:58px !important; } .asi-el .footerLogoPlate { width:230px !important; height:88px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:18px 24px !important; background:#fff !important; } .asi-el .footerLogoPlate img { display:block !important; max-width:178px !important; max-height:54px !important; width:auto !important; height:auto !important; object-fit:contain !important; } @media (max-width:1100px){ .asi-el .header { position:relative !important; background:#F7FBFD !important; } .asi-el .nav { height:auto !important; min-height:104px !important; padding:16px 0 !important; } .asi-el .nav .brandLine, .asi-el .brand small { display:none !important; } .asi-el .navlinks { gap:12px !important; flex-wrap:wrap !important; justify-content:flex-end !important; } .asi-el .hero { padding-top:0 !important; min-height:auto !important; } .asi-el .hero .wrap { padding-top:64px !important; gap:34px !important; } .asi-el .heroPhoto { height:360px !important; } } @media (max-width:760px){ .asi-el .nav { width:min(100% - 32px,1190px) !important; } .asi-el .navlinks { display:none !important; } .asi-el .hero h1 { font-size:44px !important; } .asi-el .metrics { grid-template-columns:1fr !important; } .asi-el .ctaCopy { padding-left:34px !important; padding-right:34px !important; } } /* V3 – Footer-Hover analog Navigation: abgerundete Linie statt abgeschraegter Linie */ .asi-el .footerColumn a::after { height:3px !important; bottom:3px !important; border-radius:99px !important; clip-path:none !important; background:var(--yellow) !important; transition:width .22s ease, transform .22s ease !important; } .asi-el .footerColumn a:hover::after { width:100% !important; } /* V4 – Aktions-Icons Quickbar abgerundet */ .asi-el .quickItem .qBadge.phone { border-radius:18px !important; clip-path:none !important; overflow:hidden !important; background:linear-gradient(135deg, var(--navy-deep), var(--navy)) !important; color:var(--yellow) !important; border:1px solid rgba(0,159,227,.18) !important; box-shadow:0 12px 30px rgba(0,39,70,.12) !important; } .asi-el .quickItem:hover .qBadge.phone { border-radius:22px !important; background:linear-gradient(135deg, #003760, #005284) !important; } /* CI-FEINSCHLIFF NACH FINALER KARRIERESEITE */ .asi-el .header { background:#fff !important; border-bottom:0 !important; box-shadow:none !important; } .asi-el .nav {background:#fff !important; box-shadow:none !important;} .asi-el .logoBox img { width:176px !important; max-width:176px !important; max-height:52px !important; } .asi-el .navlinks { color:var(--navy-deep) !important; gap:30px !important; } .asi-el .navlinks a:not(.career) { color:var(--navy-deep) !important; opacity:1 !important; } .asi-el .navlinks a:not(.career):hover {color:var(--blue) !important;} .asi-el .navlinks a:not(.career):after { background:var(--yellow) !important; height:3px !important; bottom:2px !important; border-radius:0 !important; clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%) !important; } /* Button-Form identisch kantiger/ASI-typisch statt Pill-Buttons */ .asi-el .btn, .asi-el .career { border-radius:0 !important; clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%) !important; min-height:52px !important; padding:0 30px !important; display:inline-flex !important; align-items:center !important; gap:12px !important; font-weight:900 !important; text-transform:uppercase !important; letter-spacing:.04em !important; } .asi-el .career { min-height:auto !important; padding:14px 22px !important; background:var(--yellow) !important; color:var(--navy-deep) !important; box-shadow:none !important; } .asi-el .btn:before, .asi-el .btn:after, .asi-el .career:before, .asi-el .career:after { border-radius:0 !important; } .asi-el .heroBtns .btn.primary, .asi-el .hero .btn.primary { background:var(--yellow) !important; color:var(--navy-deep) !important; box-shadow:0 16px 34px rgba(0,39,70,.10) !important; } .asi-el .heroBtns .btn.secondary, .asi-el .hero .btn.secondary { background:var(--navy) !important; border-color:var(--navy) !important; color:#fff !important; box-shadow:0 16px 34px rgba(0,39,70,.14) !important; } /* Hero ruhiger, ohne Linien/Glow, aber mit CI-konformer Text-Hierarchie */ .asi-el .hero { background:#fff !important; border-bottom:0 !important; min-height:720px !important; } .asi-el .hero:before, .asi-el .hero:after {content:none !important; display:none !important;} .asi-el .hero .wrap { padding:78px 0 46px !important; gap:58px !important; align-items:center !important; } .asi-el .heroCopy .eyebrow, .asi-el .hero .eyebrow, .asi-el .hero .eyebrow.yellow { color:var(--blue) !important; background:transparent !important; box-shadow:none !important; padding:0 !important; margin-bottom:18px !important; letter-spacing:.22em !important; } .asi-el .hero h1 {color:var(--navy-deep) !important;} .asi-el .hero .lead {color:#38536A !important;} .asi-el .heroPhoto { width:min(100%,600px) !important; height:420px !important; top:0 !important; right:0 !important; border:0 !important; border-radius:0 !important; box-shadow:0 18px 44px rgba(0,39,70,.10) !important; clip-path:none !important; } .asi-el .heroPhoto img {filter:saturate(.96) contrast(1.02) !important;} .asi-el .metrics {display:none !important;} /* Quickbar wie Karriere: klarer, weniger Corporate-Card, gleiche Kachellogik */ .asi-el .quick { margin-top:-18px !important; margin-bottom:52px !important; z-index:5 !important; } .asi-el .quickGrid { background:#fff !important; border:1px solid var(--line) !important; box-shadow:var(--shadow-soft) !important; clip-path:polygon(1.5% 0, 100% 0, 98.5% 100%, 0 100%) !important; border-radius:0 !important; overflow:hidden !important; gap:0 !important; } .asi-el .quickItem { min-height:128px !important; padding:28px 30px !important; border-right:1px solid var(--line) !important; background:#fff !important; transition:transform .22s ease, box-shadow .22s ease, background .22s ease !important; } .asi-el .quickItem:last-child {border-right:0 !important;} .asi-el .quickItem:hover { transform:translateY(-4px) !important; background:#fbfdff !important; box-shadow:0 18px 44px rgba(0,39,70,.10) !important; z-index:2 !important; } .asi-el .qBadge, .asi-el .qBadge.certBadge { border-radius:0 !important; clip-path:none !important; background:#EFF8FC !important; box-shadow:none !important; } .asi-el .qBadge.phone { background:var(--navy) !important; color:var(--yellow) !important; border-radius:0 !important; box-shadow:none !important; } .asi-el .quickItem:hover .qBadge.phone { background:var(--navy-deep) !important; color:var(--yellow) !important; } @media (max-width:1100px){ .asi-el .header {position:relative !important;} .asi-el .hero {padding-top:0 !important; min-height:auto !important;} .asi-el .hero .wrap {grid-template-columns:1fr !important; padding-top:54px !important;} .asi-el .heroPhoto {position:relative !important; width:100% !important; height:360px !important;} .asi-el .quick {margin-top:0 !important;} } @media (max-width:760px){ .asi-el .logoBox img {width:158px !important; max-width:158px !important;} } /* CI-Abgleich zur Karriereseite: Zertifikat-/Quickbar-Leiste Schriftgroessen exakt reduzieren */ .asi-el .quick { margin-top:18px !important; } .asi-el .quickGrid { gap:22px !important; } .asi-el .quickItem { grid-template-columns:62px 1fr !important; gap:18px !important; min-height:128px !important; padding:28px 30px !important; align-items:center !important; } .asi-el .quickItem b { display:block !important; color:var(--navy-deep) !important; font-size:16px !important; line-height:1.2 !important; font-weight:900 !important; letter-spacing:0 !important; margin:0 0 5px !important; } .asi-el .quickItem span { display:block !important; color:var(--muted) !important; font-size:13px !important; line-height:1.35 !important; font-weight:800 !important; letter-spacing:0 !important; margin:0 !important; } .asi-el .quickItem strong { display:block !important; color:var(--navy-deep) !important; font-size:22px !important; line-height:1.1 !important; font-weight:950 !important; letter-spacing:-.01em !important; margin:0 0 4px !important; } .asi-el .quickItem .qBadge.phone { width:auto !important; height:auto !important; flex:0 0 62px !important; background:none !important; border:0 !important; box-shadow:none !important; color:var(--blue) !important; font-size:36px !important; line-height:1 !important; display:grid !important; place-items:center !important; } .asi-el .quickItem .qBadge.certBadge, .asi-el .quickItem .qBadge:not(.phone) { width:62px !important; height:86px !important; flex:0 0 62px !important; background:none !important; border:0 !important; box-shadow:none !important; display:grid !important; place-items:center !important; overflow:visible !important; } .asi-el .quickItem .qBadge.certBadge img, .asi-el .quickItem .qBadge:not(.phone) img { max-width:58px !important; max-height:78px !important; width:auto !important; height:auto !important; object-fit:contain !important; } .asi-el .quickItem:hover .qBadge, .asi-el .quickItem:hover .qBadge.phone { transform:none !important; box-shadow:none !important; background:none !important; } .asi-el .quickItem:hover .qBadge img, .asi-el .quickItem:hover .qBadge.certBadge img, .asi-el .quickItem:hover .qBadge:not(.phone) img { transform:scale(1.06) !important; } /* V6.2 – Quickbar exakt an finale Karriereseite angeglichen Referenzwerte aus Karriere-Quickbar: Karte 132px, Padding 22px, Titel 15px, Beschreibung 12px, Icon/Zertifikat 62/70px. */ .asi-el .quick { margin-top:-46px !important; margin-bottom:62px !important; padding:0 !important; background:#eef4f7 !important; position:relative !important; z-index:8 !important; } .asi-el .quick .wrap { width:min(1190px, calc(100% - 64px)) !important; margin:0 auto !important; } .asi-el .quickGrid { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:14px !important; background:transparent !important; border:0 !important; box-shadow:none !important; clip-path:none !important; overflow:visible !important; } .asi-el .quickItem { min-width:0 !important; min-height:132px !important; padding:22px !important; background:#fff !important; border:1px solid rgba(0,39,70,.08) !important; border-radius:24px !important; box-shadow:var(--routeb-shadow-soft) !important; display:flex !important; align-items:center !important; gap:16px !important; overflow:hidden !important; transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease !important; } .asi-el .quickItem:hover { transform:translateY(-8px) !important; background:#fff !important; box-shadow:0 26px 60px rgba(0,39,70,.14) !important; z-index:3 !important; } .asi-el .quickItem::before, .asi-el .quickItem::after { content:none !important; display:none !important; } .asi-el .quickItem b { display:block !important; color:var(--routeb-ink) !important; font-size:15px !important; line-height:1.18 !important; font-weight:950 !important; letter-spacing:-.01em !important; margin:0 0 5px !important; } .asi-el .quickItem span { display:block !important; color:var(--routeb-muted) !important; font-size:12px !important; line-height:1.35 !important; font-weight:700 !important; margin:0 !important; } .asi-el .quickItem strong { display:block !important; color:var(--routeb-ink) !important; font-size:22px !important; line-height:1.08 !important; font-weight:950 !important; letter-spacing:-.02em !important; margin:0 0 3px !important; } .asi-el .qBadge, .asi-el .qBadge.phone { flex:0 0 62px !important; width:62px !important; height:62px !important; display:grid !important; place-items:center !important; background:transparent !important; border:0 !important; border-radius:0 !important; clip-path:none !important; box-shadow:none !important; overflow:visible !important; color:var(--blue) !important; font-size:34px !important; font-weight:400 !important; line-height:1 !important; } .asi-el .quickItem:first-child .qBadge.phone, .asi-el .quickItem:last-child .qBadge.phone { flex-basis:62px !important; width:62px !important; height:62px !important; font-size:34px !important; color:var(--blue) !important; } .asi-el .qBadge.certBadge, .asi-el .quickItem .qBadge.certBadge { flex:0 0 70px !important; width:70px !important; height:70px !important; display:grid !important; place-items:center !important; background:#fff !important; border:0 !important; border-radius:20px !important; box-shadow:none !important; overflow:visible !important; cursor:zoom-in !important; } .asi-el .qBadge img, .asi-el .qBadge.certBadge img, .asi-el .qBadge:not(.phone) img { max-width:64px !important; max-height:64px !important; width:auto !important; height:auto !important; object-fit:contain !important; transform:none !important; transition:transform .22s ease !important; } .asi-el .quickItem:hover .qBadge, .asi-el .quickItem:hover .qBadge.phone, .asi-el .quickItem:hover .qBadge.certBadge { transform:none !important; background:transparent !important; color:var(--blue) !important; box-shadow:none !important; border-color:transparent !important; } .asi-el .quickItem:hover .qBadge img, .asi-el .quickItem:hover .qBadge.certBadge img, .asi-el .quickItem:hover .qBadge:not(.phone) img { transform:scale(1.14) !important; } .asi-el .certLightbox { background:rgba(0,39,70,.68) !important; backdrop-filter:blur(8px) !important; } .asi-el .certLightbox__panel { border-radius:28px !important; padding:30px !important; } .asi-el .certLightbox__close { background:var(--yellow) !important; color:var(--navy-deep) !important; } @media (max-width:1100px){ .asi-el .quickGrid {grid-template-columns:repeat(2,minmax(0,1fr)) !important;} } @media (max-width:720px){ .asi-el .quick {margin-top:0 !important; margin-bottom:42px !important;} .asi-el .quickGrid {grid-template-columns:1fr !important;} } /* V-Korrektur: Rundungen global an Karriereseite angleichen – etwas reduzierter, Buttons bleiben rund */ .asi-el { --routeb-radius:24px !important; --routeb-radius-sm:18px !important; --routeb-radius-lg:28px !important; } /* Header / Logo */ .asi-el .logoBox, .asi-el .footerLogoPlate { border-radius:18px !important; } /* Buttons bewusst rund lassen */ .asi-el .btn, .asi-el .career, .asi-el .careerFooter, .asi-el .certLightbox__close, .asi-el .emergencyFlag { border-radius:999px !important; } /* Hero-Bild wie Karriere, aber etwas weniger stark gerundet */ .asi-el .heroPhoto, .asi-el .heroPhoto img, .asi-el .ctaImage, .asi-el .ctaImage img { border-radius:22px !important; } /* Quickbar / Zertifikat-Leiste */ .asi-el .quickItem { border-radius:20px !important; } .asi-el .qBadge, .asi-el .qBadge.phone, .asi-el .qBadge.certBadge { border-radius:14px !important; } .asi-el .quickItem:hover .qBadge.phone { border-radius:16px !important; } /* Leistungs-, Zielgruppen-, News-, Proof- und Kontaktkarten */ .asi-el .serviceCard, .asi-el .newsCard, .asi-el .newsExpandPanel, .asi-el .proofTile, .asi-el .contactItem, .asi-el .contactItem.emergencyContact { border-radius:22px !important; } .asi-el .servicePhoto, .asi-el .servicePhoto img, .asi-el .newsImg, .asi-el .newsImg img { border-radius:18px !important; } .asi-el .audCard, .asi-el .audCard img { border-radius:22px !important; } /* CTA-Panel und sonstige große Karten etwas zurücknehmen */ .asi-el .ctaPanel, .asi-el .certLightbox__panel { border-radius:24px !important; } /* Große Abschnittshintergründe weiterhin mit klaren Kanten, ohne abgerundete Modulübergänge */ .asi-el .services, .asi-el .audience, .asi-el .why, .asi-el .news, .asi-el .careerCta, .asi-el .contact, .asi-el .footer { border-radius:0 !important; } /* Kleine Tags/Labels zurückhaltender */ .asi-el .audTag, .asi-el .newsExpandPanel__tag { border-radius:12px !important; } /* Mobile ebenfalls konsistent */ @media (max-width:900px){ .asi-el .heroPhoto, .asi-el .heroPhoto img, .asi-el .ctaImage, .asi-el .ctaImage img { border-radius:20px !important; } .asi-el .quickItem, .asi-el .serviceCard, .asi-el .newsCard, .asi-el .proofTile, .asi-el .contactItem, .asi-el .audCard { border-radius:20px !important; } } /* V-Update – Galeriepfeile links/rechts neben der News-Reihe */ .asi-el .news .wrap { overflow:visible !important; } .asi-el .newsViewport { position:relative !important; overflow:visible !important; } .asi-el .newsTeaserPrev, .asi-el .newsTeaserNext { position:absolute; top:50%; transform:translateY(-50%); width:78px; height:132px; border:0; padding:0; display:grid; place-items:center; background:transparent !important; color:var(--navy-deep); font-size:104px; font-weight:260; line-height:.72; cursor:pointer; z-index:12; text-shadow:0 8px 26px rgba(0,39,70,.14); transition:transform .22s ease, color .22s ease, text-shadow .22s ease; } .asi-el .newsTeaserPrev { left:-88px; } .asi-el .newsTeaserNext { right:-88px; } .asi-el .newsTeaserPrev span, .asi-el .newsTeaserNext span { display:block; transform:translateY(-4px); } .asi-el .newsTeaserPrev:hover, .asi-el .newsTeaserPrev:focus-visible { transform:translateY(-50%) translateX(-8px); color:var(--blue); text-shadow:0 12px 34px rgba(0,39,70,.20); } .asi-el .newsTeaserNext:hover, .asi-el .newsTeaserNext:focus-visible { transform:translateY(-50%) translateX(8px); color:var(--blue); text-shadow:0 12px 34px rgba(0,39,70,.20); } .asi-el .newsTeaserPrev:focus-visible, .asi-el .newsTeaserNext:focus-visible { outline:4px solid var(--yellow); outline-offset:6px; } .asi-el .newsGrid { transition:transform .34s cubic-bezier(.2,.72,.2,1), opacity .24s ease !important; } .asi-el .newsGrid.is-sliding-prev { transform:translateX(34px) !important; opacity:.18 !important; } .asi-el .newsGrid.is-sliding-next { transform:translateX(-34px) !important; opacity:.18 !important; } @media (max-width:1320px){ .asi-el .newsTeaserPrev { left:-58px; } .asi-el .newsTeaserNext { right:-58px; } } @media (max-width:900px){ .asi-el .newsViewport { overflow:hidden !important; } .asi-el .newsTeaserPrev, .asi-el .newsTeaserNext { display:none !important; } .asi-el .newsGrid.is-sliding-prev, .asi-el .newsGrid.is-sliding-next { transform:none !important; opacity:1 !important; } } @media (prefers-reduced-motion: reduce){ .asi-el .newsGrid, .asi-el .newsTeaserPrev, .asi-el .newsTeaserNext { transition:none !important; } } /* FINAL ABGLEICH MIT KARRIERESEITE: Navigation + Hero weiss, clean und CI-konform */ .asi-el .header { height:104px !important; position:absolute !important; top:0 !important; left:0 !important; right:0 !important; z-index:30 !important; background:#fff !important; color:var(--navy-deep) !important; border-bottom:1px solid rgba(0,55,96,.08) !important; box-shadow:0 10px 34px rgba(0,39,70,.06) !important; pointer-events:none !important; } .asi-el .header:before, .asi-el .header:after {content:none !important; display:none !important;} .asi-el .header .nav, .asi-el .header .nav * {pointer-events:auto !important;} .asi-el .nav { height:104px !important; align-items:center !important; background:#fff !important; box-shadow:none !important; } .asi-el .brand { gap:0 !important; color:var(--navy-deep) !important; background:transparent !important; box-shadow:none !important; border:0 !important; clip-path:none !important; padding:0 !important; } .asi-el .logoBox { width:auto !important; height:auto !important; padding:0 !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; clip-path:none !important; display:flex !important; align-items:center !important; } .asi-el .logoBox img { width:178px !important; max-width:178px !important; max-height:52px !important; height:auto !important; object-fit:contain !important; display:block !important; } .asi-el .brandLine, .asi-el .brand small {display:none !important;} .asi-el .navlinks { color:var(--navy-deep) !important; gap:28px !important; font-size:12px !important; letter-spacing:.065em !important; } .asi-el .navlinks a { color:var(--navy-deep) !important; opacity:1 !important; text-shadow:none !important; } .asi-el .navlinks a:not(.career) {padding:11px 0 !important;} .asi-el .navlinks a:not(.career):hover {color:var(--blue) !important;} .asi-el .navlinks a:not(.career):after { bottom:2px !important; height:3px !important; background:var(--yellow) !important; border-radius:99px !important; clip-path:none !important; } .asi-el .navlinks a:not(.career):hover:after {width:100% !important;} .asi-el .career { background:var(--yellow) !important; color:var(--navy-deep) !important; border-radius:0 !important; clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 100%, 0 100%) !important; padding:14px 22px !important; box-shadow:none !important; } .asi-el .career::before {content:none !important; display:none !important;} .asi-el .career:hover { background:#FFE167 !important; color:var(--navy-deep) !important; transform:translateY(-2px) !important; box-shadow:0 14px 30px rgba(0,39,70,.12) !important; } .asi-el .hero { min-height:740px !important; padding-top:104px !important; background:#fff !important; color:var(--navy-deep) !important; border-bottom:1px solid rgba(0,55,96,.08) !important; overflow:hidden !important; } .asi-el .hero:before, .asi-el .hero:after { content:none !important; display:none !important; background:none !important; opacity:0 !important; animation:none !important; } .asi-el .hero .wrap { grid-template-columns:minmax(0,560px) minmax(0,1fr) !important; gap:56px !important; padding:88px 0 50px !important; align-items:center !important; z-index:2 !important; } .asi-el .heroCopy {padding-top:0 !important;} .asi-el .heroCopy .eyebrow, .asi-el .hero .eyebrow, .asi-el .hero .eyebrow.yellow { display:block !important; width:auto !important; padding:0 !important; margin-bottom:18px !important; background:transparent !important; color:var(--navy-deep) !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; clip-path:none !important; text-transform:uppercase !important; letter-spacing:.22em !important; } .asi-el .hero h1 { color:var(--navy-deep) !important; font-size:clamp(48px,4.55vw,68px) !important; max-width:610px !important; } .asi-el .hero .lead { color:#38536A !important; font-size:20px !important; max-width:570px !important; margin:28px 0 34px !important; } .asi-el .heroBtns {display:flex !important; flex-wrap:wrap !important; gap:16px !important;} .asi-el .heroBtns .btn.primary, .asi-el .hero .btn.primary { background:var(--yellow) !important; color:var(--navy-deep) !important; border:0 !important; box-shadow:0 18px 38px rgba(0,39,70,.12) !important; } .asi-el .heroBtns .btn.secondary, .asi-el .hero .btn.secondary { background:var(--navy) !important; color:#fff !important; border:1px solid var(--navy) !important; box-shadow:0 18px 38px rgba(0,39,70,.16) !important; } .asi-el .heroBtns .btn.primary:hover {background:#FFE167 !important; color:var(--navy-deep) !important;} .asi-el .heroBtns .btn.secondary:hover {background:var(--navy-deep) !important; color:#fff !important; border-color:var(--navy-deep) !important;} .asi-el .heroVisual {min-height:470px !important;} .asi-el .heroPhoto { top:0 !important; right:0 !important; width:min(100%,620px) !important; height:430px !important; border:1px solid rgba(0,55,96,.08) !important; border-radius:0 !important; clip-path:none !important; overflow:hidden !important; box-shadow:0 28px 70px rgba(0,39,70,.14) !important; background:#fff !important; } .asi-el .heroPhoto:after {content:none !important; display:none !important;} .asi-el .heroPhoto img {filter:saturate(.96) contrast(1.02) !important; object-position:center center !important;} .asi-el .metrics {display:none !important;} .asi-el .quick { margin-top:-22px !important; position:relative !important; z-index:5 !important; } .asi-el .quickGrid { background:#fff !important; border:1px solid rgba(0,55,96,.12) !important; box-shadow:0 22px 58px rgba(0,39,70,.10) !important; clip-path:none !important; border-radius:0 !important; overflow:visible !important; } .asi-el .quickItem { background:#fff !important; border-right:1px solid var(--line) !important; } .asi-el .quickItem:last-child {border-right:none !important;} .asi-el .quickItem:hover {background:#F4F8FB !important; transform:translateY(-4px) !important;} .asi-el .qBadge { border-radius:0 !important; clip-path:none !important; background:#EFF8FC !important; } .asi-el .qBadge.phone { background:var(--navy) !important; color:var(--yellow) !important; } .asi-el .quickItem:hover .qBadge.phone {background:var(--blue) !important; color:#fff !important;} @media (max-width:1100px){ .asi-el .header {position:relative !important;} .asi-el .hero {padding-top:0 !important; min-height:auto !important;} .asi-el .hero .wrap {grid-template-columns:1fr !important; padding-top:54px !important; gap:34px !important;} .asi-el .heroPhoto {position:relative !important; width:100% !important; height:360px !important; right:auto !important;} .asi-el .quick {margin-top:0 !important;} } @media (max-width:760px){ .asi-el .navlinks {display:none !important;} .asi-el .logoBox img {width:158px !important; max-width:158px !important;} .asi-el .hero h1 {font-size:44px !important;} } /* V6.2 – Quickbar exakt an finale Karriereseite angeglichen Referenzwerte aus Karriere-Quickbar: Karte 132px, Padding 22px, Titel 15px, Beschreibung 12px, Icon/Zertifikat 62/70px. */ .asi-el .quick { margin-top:-46px !important; margin-bottom:62px !important; padding:0 !important; background:#eef4f7 !important; position:relative !important; z-index:8 !important; } .asi-el .quick .wrap { width:min(1190px, calc(100% - 64px)) !important; margin:0 auto !important; } .asi-el .quickGrid { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:14px !important; background:transparent !important; border:0 !important; box-shadow:none !important; clip-path:none !important; overflow:visible !important; } .asi-el .quickItem { min-width:0 !important; min-height:132px !important; padding:22px !important; background:#fff !important; border:1px solid rgba(0,39,70,.08) !important; border-radius:24px !important; box-shadow:var(--routeb-shadow-soft) !important; display:flex !important; align-items:center !important; gap:16px !important; overflow:hidden !important; transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease !important; } .asi-el .quickItem:hover { transform:translateY(-8px) !important; background:#fff !important; box-shadow:0 26px 60px rgba(0,39,70,.14) !important; z-index:3 !important; } .asi-el .quickItem::before, .asi-el .quickItem::after { content:none !important; display:none !important; } .asi-el .quickItem b { display:block !important; color:var(--routeb-ink) !important; font-size:15px !important; line-height:1.18 !important; font-weight:950 !important; letter-spacing:-.01em !important; margin:0 0 5px !important; } .asi-el .quickItem span { display:block !important; color:var(--routeb-muted) !important; font-size:12px !important; line-height:1.35 !important; font-weight:700 !important; margin:0 !important; } .asi-el .quickItem strong { display:block !important; color:var(--routeb-ink) !important; font-size:22px !important; line-height:1.08 !important; font-weight:950 !important; letter-spacing:-.02em !important; margin:0 0 3px !important; } .asi-el .qBadge, .asi-el .qBadge.phone { flex:0 0 62px !important; width:62px !important; height:62px !important; display:grid !important; place-items:center !important; background:transparent !important; border:0 !important; border-radius:0 !important; clip-path:none !important; box-shadow:none !important; overflow:visible !important; color:var(--blue) !important; font-size:34px !important; font-weight:400 !important; line-height:1 !important; } .asi-el .quickItem:first-child .qBadge.phone, .asi-el .quickItem:last-child .qBadge.phone { flex-basis:62px !important; width:62px !important; height:62px !important; font-size:34px !important; color:var(--blue) !important; } .asi-el .qBadge.certBadge, .asi-el .quickItem .qBadge.certBadge { flex:0 0 70px !important; width:70px !important; height:70px !important; display:grid !important; place-items:center !important; background:#fff !important; border:0 !important; border-radius:20px !important; box-shadow:none !important; overflow:visible !important; cursor:zoom-in !important; } .asi-el .qBadge img, .asi-el .qBadge.certBadge img, .asi-el .qBadge:not(.phone) img { max-width:64px !important; max-height:64px !important; width:auto !important; height:auto !important; object-fit:contain !important; transform:none !important; transition:transform .22s ease !important; } .asi-el .quickItem:hover .qBadge, .asi-el .quickItem:hover .qBadge.phone, .asi-el .quickItem:hover .qBadge.certBadge { transform:none !important; background:transparent !important; color:var(--blue) !important; box-shadow:none !important; border-color:transparent !important; } .asi-el .quickItem:hover .qBadge img, .asi-el .quickItem:hover .qBadge.certBadge img, .asi-el .quickItem:hover .qBadge:not(.phone) img { transform:scale(1.14) !important; } .asi-el .certLightbox { background:rgba(0,39,70,.68) !important; backdrop-filter:blur(8px) !important; } .asi-el .certLightbox__panel { border-radius:28px !important; padding:30px !important; } .asi-el .certLightbox__close { background:var(--yellow) !important; color:var(--navy-deep) !important; } @media (max-width:1100px){ .asi-el .quickGrid {grid-template-columns:repeat(2,minmax(0,1fr)) !important;} } @media (max-width:720px){ .asi-el .quick {margin-top:0 !important; margin-bottom:42px !important;} .asi-el .quickGrid {grid-template-columns:1fr !important;} } /* V-Korrektur: Rundungen global an Karriereseite angleichen – etwas reduzierter, Buttons bleiben rund */ .asi-el { --routeb-radius:24px !important; --routeb-radius-sm:18px !important; --routeb-radius-lg:28px !important; } /* Header / Logo */ .asi-el .logoBox, .asi-el .footerLogoPlate { border-radius:18px !important; } /* Buttons bewusst rund lassen */ .asi-el .btn, .asi-el .career, .asi-el .careerFooter, .asi-el .certLightbox__close, .asi-el .emergencyFlag { border-radius:999px !important; } /* Hero-Bild wie Karriere, aber etwas weniger stark gerundet */ .asi-el .heroPhoto, .asi-el .heroPhoto img, .asi-el .ctaImage, .asi-el .ctaImage img { border-radius:22px !important; } /* Quickbar / Zertifikat-Leiste */ .asi-el .quickItem { border-radius:20px !important; } .asi-el .qBadge, .asi-el .qBadge.phone, .asi-el .qBadge.certBadge { border-radius:14px !important; } .asi-el .quickItem:hover .qBadge.phone { border-radius:16px !important; } /* Leistungs-, Zielgruppen-, News-, Proof- und Kontaktkarten */ .asi-el .serviceCard, .asi-el .newsCard, .asi-el .newsExpandPanel, .asi-el .proofTile, .asi-el .contactItem, .asi-el .contactItem.emergencyContact { border-radius:22px !important; } .asi-el .servicePhoto, .asi-el .servicePhoto img, .asi-el .newsImg, .asi-el .newsImg img { border-radius:18px !important; } .asi-el .audCard, .asi-el .audCard img { border-radius:22px !important; } /* CTA-Panel und sonstige große Karten etwas zurücknehmen */ .asi-el .ctaPanel, .asi-el .certLightbox__panel { border-radius:24px !important; } /* Große Abschnittshintergründe weiterhin mit klaren Kanten, ohne abgerundete Modulübergänge */ .asi-el .services, .asi-el .audience, .asi-el .why, .asi-el .news, .asi-el .careerCta, .asi-el .contact, .asi-el .footer { border-radius:0 !important; } /* Kleine Tags/Labels zurückhaltender */ .asi-el .audTag, .asi-el .newsExpandPanel__tag { border-radius:12px !important; } /* Mobile ebenfalls konsistent */ @media (max-width:900px){ .asi-el .heroPhoto, .asi-el .heroPhoto img, .asi-el .ctaImage, .asi-el .ctaImage img { border-radius:20px !important; } .asi-el .quickItem, .asi-el .serviceCard, .asi-el .newsCard, .asi-el .proofTile, .asi-el .contactItem, .asi-el .audCard { border-radius:20px !important; } } /* Sichtbarkeits-Fix: alte Header-Load-Animationen fuer den neuen weissen Hero neutralisieren */ .asi-el .heroCopy .eyebrow, .asi-el .heroCopy h1, .asi-el .heroCopy .lead, .asi-el .heroBtns, .asi-el .heroPhoto, .asi-el .heroPhoto img { opacity:1 !important; animation:none !important; transform:none !important; } /* FINAL KORREKTUR – Abgleich zur finalen Karriereseite - Buttons rund - Moduluebergaenge mit klaren Kanten, keine abgerundeten Hintergrundbereiche - Headerbild abgerundet wie Karriereseite */ .asi-el .btn, .asi-el a.btn, .asi-el button.btn, .asi-el .heroBtns .btn, .asi-el .ctaPanel .btn, .asi-el .career, .asi-el .careerFooter { border-radius:999px !important; clip-path:none !important; overflow:hidden !important; } .asi-el .btn.primary, .asi-el .heroBtns .btn.primary { background:var(--yellow) !important; color:var(--navy-deep) !important; box-shadow:0 14px 30px rgba(255,209,28,.18) !important; } .asi-el .btn.secondary, .asi-el .heroBtns .btn.secondary { background:var(--navy-deep) !important; color:#fff !important; border:1px solid var(--navy-deep) !important; } .asi-el .btn.primary:hover { background:#FFE167 !important; color:var(--navy-deep) !important; } .asi-el .btn.secondary:hover { background:var(--navy) !important; color:#fff !important; border-color:var(--navy) !important; } .asi-el .career { background:var(--yellow) !important; color:var(--navy-deep) !important; box-shadow:none !important; } /* Headerbild: abgerundet, ruhig, nicht kantig */ .asi-el .heroPhoto { border-radius:30px !important; clip-path:none !important; overflow:hidden !important; border:0 !important; box-shadow:0 18px 46px rgba(0,39,70,.12) !important; } .asi-el .heroPhoto img, .asi-el .heroPhoto:after { border-radius:30px !important; } /* Klare Moduluebergaenge: keine Rundungen an grossen Hintergrundflaechen */ .asi-el .services, .asi-el .audience, .asi-el .why, .asi-el .news, .asi-el .careerCta, .asi-el .contact, .asi-el .footer, .asi-el .section, .asi-el .section.soft { border-radius:0 !important; clip-path:none !important; } .asi-el .services:before, .asi-el .audience:before, .asi-el .footer:before, .asi-el .footer:after { display:none !important; content:none !important; } /* Keine schraeg/abgerundeten Hintergrund-Panels an Modulgrenzen */ .asi-el .ctaPanel { clip-path:none !important; } /* Quickbar bleibt als Kachelleiste erhalten, aber ohne uebertriebene Rundung */ .asi-el .quickGrid { clip-path:none !important; } /* V6.1 – Zertifikat-/Quickbar-Leiste optisch an finale Karriereseite angepasst */ .asi-el .quick { margin-top:0 !important; margin-bottom:0 !important; padding:36px 0 64px !important; background:linear-gradient(180deg,#f7fafc 0%, #edf4f8 100%) !important; position:relative !important; z-index:4 !important; } .asi-el .quick .wrap { width:min(1300px, calc(100% - 96px)) !important; } .asi-el .quickGrid { display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)) !important; gap:18px !important; background:transparent !important; border:0 !important; box-shadow:none !important; clip-path:none !important; overflow:visible !important; } .asi-el .quickItem { min-height:154px !important; padding:30px 42px !important; background:#fff !important; border:0 !important; border-right:0 !important; border-radius:28px !important; box-shadow:0 18px 48px rgba(0,39,70,.07) !important; display:flex !important; align-items:center !important; gap:28px !important; overflow:hidden !important; transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease !important; } .asi-el .quickItem:last-child {border-right:0 !important;} .asi-el .quickItem:hover { transform:translateY(-5px) !important; background:#fff !important; box-shadow:0 26px 70px rgba(0,39,70,.11) !important; z-index:3 !important; } .asi-el .quickItem::before, .asi-el .quickItem::after { content:none !important; display:none !important; } .asi-el .qBadge, .asi-el .qBadge.phone, .asi-el .qBadge.certBadge, .asi-el .quickItem .qBadge.phone { width:86px !important; height:96px !important; flex:0 0 86px !important; display:grid !important; place-items:center !important; background:transparent !important; border:0 !important; border-radius:0 !important; clip-path:none !important; box-shadow:none !important; overflow:visible !important; color:var(--blue) !important; font-size:42px !important; font-weight:400 !important; line-height:1 !important; } .asi-el .qBadge.phone { font-family:Inter, Arial, Helvetica, sans-serif !important; } .asi-el .quickItem:hover .qBadge, .asi-el .quickItem:hover .qBadge.phone, .asi-el .quickItem:hover .qBadge.certBadge { transform:none !important; background:transparent !important; color:var(--blue) !important; box-shadow:none !important; border-color:transparent !important; } .asi-el .qBadge img, .asi-el .qBadge.certBadge img, .asi-el .qBadge:not(.phone) img { max-width:74px !important; max-height:96px !important; width:auto !important; height:auto !important; object-fit:contain !important; transform:none !important; transition:transform .22s ease !important; } .asi-el .quickItem:hover .qBadge img, .asi-el .quickItem:hover .qBadge.certBadge img, .asi-el .quickItem:hover .qBadge:not(.phone) img { transform:scale(1.06) !important; } .asi-el .quickItem b { display:block !important; color:var(--navy-deep) !important; font-size:22px !important; line-height:1.15 !important; font-weight:950 !important; letter-spacing:-.02em !important; margin:0 0 8px !important; } .asi-el .quickItem span { display:block !important; color:#687c8f !important; font-size:17px !important; line-height:1.35 !important; font-weight:750 !important; } .asi-el .quickItem strong { display:block !important; color:var(--navy-deep) !important; font-size:31px !important; line-height:1.08 !important; font-weight:950 !important; letter-spacing:-.025em !important; margin:0 0 4px !important; } .asi-el .quickItem:first-child .qBadge.phone, .asi-el .quickItem:last-child .qBadge.phone { font-size:44px !important; } .asi-el .quickItem:first-child .qBadge.phone { color:var(--blue) !important; } .asi-el .quickItem:last-child .qBadge.phone { color:var(--blue) !important; } .asi-el .certBadge { cursor:zoom-in !important; } .asi-el .certLightbox { background:rgba(0,39,70,.68) !important; backdrop-filter:blur(8px) !important; padding:48px !important; } .asi-el .certLightbox__panel { border-radius:30px !important; padding:34px !important; box-shadow:0 36px 90px rgba(0,0,0,.28) !important; overflow:visible !important; } .asi-el .certLightbox__panel img { max-height:72vh !important; border-radius:12px !important; } .asi-el .certLightbox__close { top:-16px !important; right:-16px !important; width:46px !important; height:46px !important; border-radius:50% !important; background:var(--yellow) !important; color:var(--navy-deep) !important; box-shadow:0 14px 30px rgba(0,0,0,.22) !important; } @media (max-width:1100px){ .asi-el .quick .wrap {width:min(100% - 56px, 1300px) !important;} .asi-el .quickGrid {grid-template-columns:repeat(2, minmax(0, 1fr)) !important;} .asi-el .quickItem {padding:28px 30px !important;} } @media (max-width:720px){ .asi-el .quick {padding:28px 0 48px !important;} .asi-el .quick .wrap {width:min(100% - 32px, 1300px) !important;} .asi-el .quickGrid {grid-template-columns:1fr !important; gap:14px !important;} .asi-el .quickItem {min-height:136px !important; padding:24px !important; gap:20px !important;} .asi-el .qBadge, .asi-el .qBadge.phone, .asi-el .qBadge.certBadge {width:64px !important; height:76px !important; flex-basis:64px !important; font-size:34px !important;} .asi-el .qBadge img, .asi-el .qBadge.certBadge img {max-width:60px !important; max-height:76px !important;} } /* V6.2 – Quickbar exakt an finale Karriereseite angeglichen Referenzwerte aus Karriere-Quickbar: Karte 132px, Padding 22px, Titel 15px, Beschreibung 12px, Icon/Zertifikat 62/70px. */ .asi-el .quick { margin-top:-46px !important; margin-bottom:62px !important; padding:0 !important; background:#eef4f7 !important; position:relative !important; z-index:8 !important; } .asi-el .quick .wrap { width:min(1190px, calc(100% - 64px)) !important; margin:0 auto !important; } .asi-el .quickGrid { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:14px !important; background:transparent !important; border:0 !important; box-shadow:none !important; clip-path:none !important; overflow:visible !important; } .asi-el .quickItem { min-width:0 !important; min-height:132px !important; padding:22px !important; background:#fff !important; border:1px solid rgba(0,39,70,.08) !important; border-radius:24px !important; box-shadow:var(--routeb-shadow-soft) !important; display:flex !important; align-items:center !important; gap:16px !important; overflow:hidden !important; transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease !important; } .asi-el .quickItem:hover { transform:translateY(-8px) !important; background:#fff !important; box-shadow:0 26px 60px rgba(0,39,70,.14) !important; z-index:3 !important; } .asi-el .quickItem::before, .asi-el .quickItem::after { content:none !important; display:none !important; } .asi-el .quickItem b { display:block !important; color:var(--routeb-ink) !important; font-size:15px !important; line-height:1.18 !important; font-weight:950 !important; letter-spacing:-.01em !important; margin:0 0 5px !important; } .asi-el .quickItem span { display:block !important; color:var(--routeb-muted) !important; font-size:12px !important; line-height:1.35 !important; font-weight:700 !important; margin:0 !important; } .asi-el .quickItem strong { display:block !important; color:var(--routeb-ink) !important; font-size:22px !important; line-height:1.08 !important; font-weight:950 !important; letter-spacing:-.02em !important; margin:0 0 3px !important; } .asi-el .qBadge, .asi-el .qBadge.phone { flex:0 0 62px !important; width:62px !important; height:62px !important; display:grid !important; place-items:center !important; background:transparent !important; border:0 !important; border-radius:0 !important; clip-path:none !important; box-shadow:none !important; overflow:visible !important; color:var(--blue) !important; font-size:34px !important; font-weight:400 !important; line-height:1 !important; } .asi-el .quickItem:first-child .qBadge.phone, .asi-el .quickItem:last-child .qBadge.phone { flex-basis:62px !important; width:62px !important; height:62px !important; font-size:34px !important; color:var(--blue) !important; } .asi-el .qBadge.certBadge, .asi-el .quickItem .qBadge.certBadge { flex:0 0 70px !important; width:70px !important; height:70px !important; display:grid !important; place-items:center !important; background:#fff !important; border:0 !important; border-radius:20px !important; box-shadow:none !important; overflow:visible !important; cursor:zoom-in !important; } .asi-el .qBadge img, .asi-el .qBadge.certBadge img, .asi-el .qBadge:not(.phone) img { max-width:64px !important; max-height:64px !important; width:auto !important; height:auto !important; object-fit:contain !important; transform:none !important; transition:transform .22s ease !important; } .asi-el .quickItem:hover .qBadge, .asi-el .quickItem:hover .qBadge.phone, .asi-el .quickItem:hover .qBadge.certBadge { transform:none !important; background:transparent !important; color:var(--blue) !important; box-shadow:none !important; border-color:transparent !important; } .asi-el .quickItem:hover .qBadge img, .asi-el .quickItem:hover .qBadge.certBadge img, .asi-el .quickItem:hover .qBadge:not(.phone) img { transform:scale(1.14) !important; } .asi-el .certLightbox { background:rgba(0,39,70,.68) !important; backdrop-filter:blur(8px) !important; } .asi-el .certLightbox__panel { border-radius:28px !important; padding:30px !important; } .asi-el .certLightbox__close { background:var(--yellow) !important; color:var(--navy-deep) !important; } @media (max-width:1100px){ .asi-el .quickGrid {grid-template-columns:repeat(2,minmax(0,1fr)) !important;} } @media (max-width:720px){ .asi-el .quick {margin-top:0 !important; margin-bottom:42px !important;} .asi-el .quickGrid {grid-template-columns:1fr !important;} } /* V-Korrektur: Rundungen global an Karriereseite angleichen – etwas reduzierter, Buttons bleiben rund */ .asi-el { --routeb-radius:24px !important; --routeb-radius-sm:18px !important; --routeb-radius-lg:28px !important; } /* Header / Logo */ .asi-el .logoBox, .asi-el .footerLogoPlate { border-radius:18px !important; } /* Buttons bewusst rund lassen */ .asi-el .btn, .asi-el .career, .asi-el .careerFooter, .asi-el .certLightbox__close, .asi-el .emergencyFlag { border-radius:999px !important; } /* Hero-Bild wie Karriere, aber etwas weniger stark gerundet */ .asi-el .heroPhoto, .asi-el .heroPhoto img, .asi-el .ctaImage, .asi-el .ctaImage img { border-radius:22px !important; } /* Quickbar / Zertifikat-Leiste */ .asi-el .quickItem { border-radius:20px !important; } .asi-el .qBadge, .asi-el .qBadge.phone, .asi-el .qBadge.certBadge { border-radius:14px !important; } .asi-el .quickItem:hover .qBadge.phone { border-radius:16px !important; } /* Leistungs-, Zielgruppen-, News-, Proof- und Kontaktkarten */ .asi-el .serviceCard, .asi-el .newsCard, .asi-el .newsExpandPanel, .asi-el .proofTile, .asi-el .contactItem, .asi-el .contactItem.emergencyContact { border-radius:22px !important; } .asi-el .servicePhoto, .asi-el .servicePhoto img, .asi-el .newsImg, .asi-el .newsImg img { border-radius:18px !important; } .asi-el .audCard, .asi-el .audCard img { border-radius:22px !important; } /* CTA-Panel und sonstige große Karten etwas zurücknehmen */ .asi-el .ctaPanel, .asi-el .certLightbox__panel { border-radius:24px !important; } /* Große Abschnittshintergründe weiterhin mit klaren Kanten, ohne abgerundete Modulübergänge */ .asi-el .services, .asi-el .audience, .asi-el .why, .asi-el .news, .asi-el .careerCta, .asi-el .contact, .asi-el .footer { border-radius:0 !important; } /* Kleine Tags/Labels zurückhaltender */ .asi-el .audTag, .asi-el .newsExpandPanel__tag { border-radius:12px !important; } /* Mobile ebenfalls konsistent */ @media (max-width:900px){ .asi-el .heroPhoto, .asi-el .heroPhoto img, .asi-el .ctaImage, .asi-el .ctaImage img { border-radius:20px !important; } .asi-el .quickItem, .asi-el .serviceCard, .asi-el .newsCard, .asi-el .proofTile, .asi-el .contactItem, .asi-el .audCard { border-radius:20px !important; } } /* V6.2 – Detailkorrekturen nach CI-Abgleich Karriereseite */ /* Navigation: Hover komplett in ASI-Hellblau statt Gelb */ .asi-el .navlinks a:not(.career):hover { color:var(--blue) !important; } .asi-el .navlinks a:not(.career):after, .asi-el .navlinks a:not(.career):hover:after { background:var(--blue) !important; } .asi-el .career:hover { background:var(--blue) !important; color:#fff !important; box-shadow:0 14px 30px rgba(0,159,227,.20) !important; } .asi-el .career:hover::before, .asi-el .career:hover::after { display:none !important; content:none !important; } /* Leistungs-Module: Bilder ohne weißen Innenrand bis an den Kartenrand */ .asi-el .serviceCard { overflow:hidden !important; } .asi-el .servicePhoto { margin:0 !important; width:100% !important; height:180px !important; border-radius:28px 28px 0 0 !important; clip-path:none !important; background:#e9f2f7 !important; } .asi-el .servicePhoto img { width:100% !important; height:100% !important; object-fit:cover !important; border-radius:28px 28px 0 0 !important; display:block !important; } /* Zielgruppen-Modul: Eyebrow und Titel weiß */ .asi-el .audience .eyebrow, .asi-el .audience h2, .asi-el .audience .headrow p { color:#fff !important; } .asi-el .audience .headrow p { opacity:.82 !important; } /* News: Bilder ohne weißen Innenrand bis an den Kartenrand */ .asi-el .newsCard { overflow:hidden !important; } .asi-el .newsImg, .asi-el .newsCard:not(.feature) .newsImg { margin:0 !important; width:100% !important; height:238px !important; flex-basis:238px !important; border-radius:30px 30px 0 0 !important; clip-path:none !important; } .asi-el .newsImg img { width:100% !important; height:100% !important; object-fit:cover !important; border-radius:30px 30px 0 0 !important; display:block !important; } .asi-el .newsCard.award .newsImg img { padding:0 !important; object-fit:cover !important; background:#F7FAFC !important; } /* Karriere-CTA: Bild ohne weißen Rand in der Card */ .asi-el .ctaPanel { overflow:hidden !important; } .asi-el .ctaImage { margin:0 !important; min-height:330px !important; border-radius:0 34px 34px 0 !important; clip-path:none !important; } .asi-el .ctaImage img { width:100% !important; height:100% !important; object-fit:cover !important; border-radius:0 34px 34px 0 !important; display:block !important; } /* Footer-Claim zweizeilig und ruhig lesbar */ .asi-el .footerBrandNew p { line-height:1.5 !important; } @media (max-width:1100px){ .asi-el .ctaImage, .asi-el .ctaImage img { border-radius:0 0 34px 34px !important; } } /* V6.2 – Quickbar exakt an finale Karriereseite angeglichen Referenzwerte aus Karriere-Quickbar: Karte 132px, Padding 22px, Titel 15px, Beschreibung 12px, Icon/Zertifikat 62/70px. */ .asi-el .quick { margin-top:-46px !important; margin-bottom:62px !important; padding:0 !important; background:#eef4f7 !important; position:relative !important; z-index:8 !important; } .asi-el .quick .wrap { width:min(1190px, calc(100% - 64px)) !important; margin:0 auto !important; } .asi-el .quickGrid { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:14px !important; background:transparent !important; border:0 !important; box-shadow:none !important; clip-path:none !important; overflow:visible !important; } .asi-el .quickItem { min-width:0 !important; min-height:132px !important; padding:22px !important; background:#fff !important; border:1px solid rgba(0,39,70,.08) !important; border-radius:24px !important; box-shadow:var(--routeb-shadow-soft) !important; display:flex !important; align-items:center !important; gap:16px !important; overflow:hidden !important; transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease !important; } .asi-el .quickItem:hover { transform:translateY(-8px) !important; background:#fff !important; box-shadow:0 26px 60px rgba(0,39,70,.14) !important; z-index:3 !important; } .asi-el .quickItem::before, .asi-el .quickItem::after { content:none !important; display:none !important; } .asi-el .quickItem b { display:block !important; color:var(--routeb-ink) !important; font-size:15px !important; line-height:1.18 !important; font-weight:950 !important; letter-spacing:-.01em !important; margin:0 0 5px !important; } .asi-el .quickItem span { display:block !important; color:var(--routeb-muted) !important; font-size:12px !important; line-height:1.35 !important; font-weight:700 !important; margin:0 !important; } .asi-el .quickItem strong { display:block !important; color:var(--routeb-ink) !important; font-size:22px !important; line-height:1.08 !important; font-weight:950 !important; letter-spacing:-.02em !important; margin:0 0 3px !important; } .asi-el .qBadge, .asi-el .qBadge.phone { flex:0 0 62px !important; width:62px !important; height:62px !important; display:grid !important; place-items:center !important; background:transparent !important; border:0 !important; border-radius:0 !important; clip-path:none !important; box-shadow:none !important; overflow:visible !important; color:var(--blue) !important; font-size:34px !important; font-weight:400 !important; line-height:1 !important; } .asi-el .quickItem:first-child .qBadge.phone, .asi-el .quickItem:last-child .qBadge.phone { flex-basis:62px !important; width:62px !important; height:62px !important; font-size:34px !important; color:var(--blue) !important; } .asi-el .qBadge.certBadge, .asi-el .quickItem .qBadge.certBadge { flex:0 0 70px !important; width:70px !important; height:70px !important; display:grid !important; place-items:center !important; background:#fff !important; border:0 !important; border-radius:20px !important; box-shadow:none !important; overflow:visible !important; cursor:zoom-in !important; } .asi-el .qBadge img, .asi-el .qBadge.certBadge img, .asi-el .qBadge:not(.phone) img { max-width:64px !important; max-height:64px !important; width:auto !important; height:auto !important; object-fit:contain !important; transform:none !important; transition:transform .22s ease !important; } .asi-el .quickItem:hover .qBadge, .asi-el .quickItem:hover .qBadge.phone, .asi-el .quickItem:hover .qBadge.certBadge { transform:none !important; background:transparent !important; color:var(--blue) !important; box-shadow:none !important; border-color:transparent !important; } .asi-el .quickItem:hover .qBadge img, .asi-el .quickItem:hover .qBadge.certBadge img, .asi-el .quickItem:hover .qBadge:not(.phone) img { transform:scale(1.14) !important; } .asi-el .certLightbox { background:rgba(0,39,70,.68) !important; backdrop-filter:blur(8px) !important; } .asi-el .certLightbox__panel { border-radius:28px !important; padding:30px !important; } .asi-el .certLightbox__close { background:var(--yellow) !important; color:var(--navy-deep) !important; } @media (max-width:1100px){ .asi-el .quickGrid {grid-template-columns:repeat(2,minmax(0,1fr)) !important;} } @media (max-width:720px){ .asi-el .quick {margin-top:0 !important; margin-bottom:42px !important;} .asi-el .quickGrid {grid-template-columns:1fr !important;} } /* V-Korrektur: Rundungen global an Karriereseite angleichen – etwas reduzierter, Buttons bleiben rund */ .asi-el { --routeb-radius:24px !important; --routeb-radius-sm:18px !important; --routeb-radius-lg:28px !important; } /* Header / Logo */ .asi-el .logoBox, .asi-el .footerLogoPlate { border-radius:18px !important; } /* Buttons bewusst rund lassen */ .asi-el .btn, .asi-el .career, .asi-el .careerFooter, .asi-el .certLightbox__close, .asi-el .emergencyFlag { border-radius:999px !important; } /* Hero-Bild wie Karriere, aber etwas weniger stark gerundet */ .asi-el .heroPhoto, .asi-el .heroPhoto img, .asi-el .ctaImage, .asi-el .ctaImage img { border-radius:22px !important; } /* Quickbar / Zertifikat-Leiste */ .asi-el .quickItem { border-radius:20px !important; } .asi-el .qBadge, .asi-el .qBadge.phone, .asi-el .qBadge.certBadge { border-radius:14px !important; } .asi-el .quickItem:hover .qBadge.phone { border-radius:16px !important; } /* Leistungs-, Zielgruppen-, News-, Proof- und Kontaktkarten */ .asi-el .serviceCard, .asi-el .newsCard, .asi-el .newsExpandPanel, .asi-el .proofTile, .asi-el .contactItem, .asi-el .contactItem.emergencyContact { border-radius:22px !important; } .asi-el .servicePhoto, .asi-el .servicePhoto img, .asi-el .newsImg, .asi-el .newsImg img { border-radius:18px !important; } .asi-el .audCard, .asi-el .audCard img { border-radius:22px !important; } /* CTA-Panel und sonstige große Karten etwas zurücknehmen */ .asi-el .ctaPanel, .asi-el .certLightbox__panel { border-radius:24px !important; } /* Große Abschnittshintergründe weiterhin mit klaren Kanten, ohne abgerundete Modulübergänge */ .asi-el .services, .asi-el .audience, .asi-el .why, .asi-el .news, .asi-el .careerCta, .asi-el .contact, .asi-el .footer { border-radius:0 !important; } /* Kleine Tags/Labels zurückhaltender */ .asi-el .audTag, .asi-el .newsExpandPanel__tag { border-radius:12px !important; } /* Mobile ebenfalls konsistent */ @media (max-width:900px){ .asi-el .heroPhoto, .asi-el .heroPhoto img, .asi-el .ctaImage, .asi-el .ctaImage img { border-radius:20px !important; } .asi-el .quickItem, .asi-el .serviceCard, .asi-el .newsCard, .asi-el .proofTile, .asi-el .contactItem, .asi-el .audCard { border-radius:20px !important; } } /* FINALER QUICKBAR-ABGLEICH ZUR KARRIERESEITE Ziel: mehr Weissraum, niedrigere Karten, feinere Icons, ruhigerer Hintergrund. */ .asi-el .hero { padding-bottom:0 !important; } .asi-el .hero .wrap { padding-bottom:74px !important; } .asi-el .quick { margin-top:0 !important; margin-bottom:0 !important; padding:74px 0 94px !important; background:linear-gradient(to bottom, #fff 0, #fff 62px, #eef4f7 62px, #eef4f7 100%) !important; position:relative !important; z-index:6 !important; } .asi-el .quick .wrap { width:min(1200px, calc(100% - 112px)) !important; margin:0 auto !important; } .asi-el .quickGrid { display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)) !important; gap:22px !important; background:transparent !important; border:0 !important; box-shadow:none !important; clip-path:none !important; overflow:visible !important; } .asi-el .quickItem { min-height:120px !important; padding:20px 24px !important; background:#fff !important; border:0 !important; border-radius:18px !important; box-shadow:0 18px 48px rgba(0,39,70,.08) !important; display:flex !important; align-items:center !important; gap:18px !important; overflow:hidden !important; transition:transform .22s ease, box-shadow .22s ease !important; } .asi-el .quickItem:hover { transform:translateY(-5px) !important; box-shadow:0 24px 58px rgba(0,39,70,.11) !important; background:#fff !important; } .asi-el .quickItem::before, .asi-el .quickItem::after { content:none !important; display:none !important; } .asi-el .quickItem > div:last-child { min-width:0 !important; } .asi-el .quickItem b { display:block !important; margin:0 0 5px !important; color:var(--navy-deep) !important; font-size:15px !important; line-height:1.18 !important; font-weight:950 !important; letter-spacing:-.01em !important; } .asi-el .quickItem span { display:block !important; margin:0 !important; color:#65798b !important; font-size:12px !important; line-height:1.34 !important; font-weight:750 !important; letter-spacing:0 !important; } .asi-el .quickItem strong { display:block !important; margin:0 0 4px !important; color:var(--navy-deep) !important; font-size:24px !important; line-height:1.02 !important; font-weight:950 !important; letter-spacing:-.035em !important; } .asi-el .qBadge, .asi-el .qBadge.phone, .asi-el .qBadge.certBadge, .asi-el .quickItem .qBadge.certBadge, .asi-el .quickItem .qBadge:not(.phone) { flex:0 0 58px !important; width:58px !important; height:58px !important; min-width:58px !important; display:grid !important; place-items:center !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; clip-path:none !important; overflow:visible !important; color:var(--blue) !important; font-size:32px !important; font-weight:400 !important; line-height:1 !important; } .asi-el .qBadge.certBadge, .asi-el .quickItem .qBadge.certBadge, .asi-el .quickItem .qBadge:not(.phone) { flex-basis:60px !important; width:60px !important; height:72px !important; min-width:60px !important; cursor:zoom-in !important; } .asi-el .qBadge img, .asi-el .qBadge.certBadge img, .asi-el .qBadge:not(.phone) img { max-width:54px !important; max-height:68px !important; width:auto !important; height:auto !important; object-fit:contain !important; transform:none !important; transition:transform .22s ease !important; } .asi-el .quickItem:hover .qBadge, .asi-el .quickItem:hover .qBadge.phone, .asi-el .quickItem:hover .qBadge.certBadge { transform:none !important; background:transparent !important; box-shadow:none !important; color:var(--blue) !important; } .asi-el .quickItem:hover .qBadge img, .asi-el .quickItem:hover .qBadge.certBadge img, .asi-el .quickItem:hover .qBadge:not(.phone) img { transform:scale(1.08) !important; } .asi-el .certLightbox { background:rgba(0,39,70,.66) !important; backdrop-filter:blur(8px) !important; } .asi-el .certLightbox__panel { border-radius:22px !important; padding:28px !important; box-shadow:0 30px 86px rgba(0,0,0,.28) !important; } @media (max-width:1100px){ .asi-el .quick {padding-top:54px !important;} .asi-el .quick .wrap {width:min(1200px, calc(100% - 56px)) !important;} .asi-el .quickGrid {grid-template-columns:repeat(2,minmax(0,1fr)) !important;} } @media (max-width:720px){ .asi-el .quick {padding:42px 0 64px !important; background:#eef4f7 !important;} .asi-el .quickGrid {grid-template-columns:1fr !important;} .asi-el .quickItem {min-height:112px !important;} } /* Finale Korrekturen Unternehmensseite: Service-Buttons, weisse Zielgruppen-Texte, Quickbar ohne eigenen Hintergrund */ .asi-el .quick, .asi-el .quick .wrap, .asi-el .quickGrid { background:transparent !important; } .asi-el .quick { background:none !important; padding:0 !important; } .asi-el .quick::before, .asi-el .quick::after { display:none !important; content:none !important; } .asi-el .serviceCard { display:flex !important; flex-direction:column !important; } .asi-el .serviceBody { display:flex !important; flex-direction:column !important; flex:1 1 auto !important; padding:24px 26px 22px !important; } .asi-el .serviceBody h3 { margin-bottom:10px !important; } .asi-el .serviceBody p { margin:0 0 18px !important; } .asi-el .serviceMoreButton { margin-top:auto !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; width:100% !important; padding-top:18px !important; border-top:1px solid rgba(7,36,61,.10) !important; color:var(--navy-deep) !important; font-size:13px !important; font-weight:950 !important; letter-spacing:.08em !important; text-transform:uppercase !important; text-decoration:none !important; line-height:1.2 !important; } .asi-el .serviceMoreButton:hover, .asi-el .serviceCard:hover .serviceMoreButton { color:var(--navy-deep) !important; text-decoration:none !important; } .asi-el .serviceMoreButton .serviceMoreLabel { display:inline-block !important; } .asi-el .serviceMoreButton .serviceMoreArrow { flex:0 0 auto !important; font-size:30px !important; line-height:1 !important; color:var(--navy-deep) !important; font-weight:800 !important; } .asi-el .audCard h3, .asi-el .audCard p, .asi-el .audCard .audTag, .asi-el .audCard .txt { color:#fff !important; } .asi-el .audCard p { opacity:1 !important; } /* Finale Korrektur: Mehr-erfahren-Hover hellblau, CTA-Bild links gerade, Quickbar ohne blaugrauen Hintergrund */ .asi-el .serviceMoreButton:hover, .asi-el .serviceCard:hover .serviceMoreButton, .asi-el .serviceMoreButton:hover .serviceMoreArrow, .asi-el .serviceCard:hover .serviceMoreArrow { color:var(--blue) !important; } /* Blaugrauen Hintergrund hinter der Quickbar entfernen */ .asi-el { background:#fff !important; } .asi-el .quick, .asi-el .quick .wrap, .asi-el .quickGrid { background:transparent !important; background-image:none !important; } .asi-el .quick { padding:0 !important; box-shadow:none !important; } .asi-el .quick::before, .asi-el .quick::after { display:none !important; content:none !important; } /* CTA-Bild: linke Seite gerade, keine Rundung links */ .asi-el .ctaImage, .asi-el .ctaImage img { border-radius:0 22px 22px 0 !important; clip-path:none !important; } .asi-el .ctaPanel { overflow:hidden !important; } @media (max-width:1100px){ .asi-el .ctaImage, .asi-el .ctaImage img { border-radius:0 0 22px 22px !important; } } /* FINAL KORREKTUR – Modultrenner Quickbar Die feine Linie oberhalb/unter dem Hero wird entfernt und als sauberer Modultrenner mit Abstand unterhalb der Quickbar gesetzt. */ .asi-el .hero { border-bottom:0 !important; } .asi-el .quick { position:relative !important; } .asi-el .quick::before { content:none !important; display:none !important; } .asi-el .quick::after { content:"" !important; position:absolute !important; left:50% !important; bottom:-32px !important; transform:translateX(-50%) !important; width:min(1190px, calc(100% - 64px)) !important; height:1px !important; background:rgba(0,55,96,.12) !important; pointer-events:none !important; } @media (max-width:720px){ .asi-el .quick::after { bottom:-24px !important; width:min(100% - 32px, 1190px) !important; } } /* Korrektur: Leistungsbilder unten mit geraden Ecken, oben weiterhin passend zur Karte abgerundet */ .asi-el .servicePhoto, .asi-el .servicePhoto img { border-radius:22px 22px 0 0 !important; } /* Korrektur: Newsbilder oben abgerundet, unten gerade – analog Leistungsbilder */ .asi-el .newsImg, .asi-el .newsCard:not(.feature) .newsImg { border-radius:22px 22px 0 0 !important; overflow:hidden !important; } .asi-el .newsImg img, .asi-el .newsCard.award .newsImg img { border-radius:22px 22px 0 0 !important; display:block !important; } /* Korrektur: News-CTA "Mehr erfahren" mit hellblauem Hover */ .asi-el .newsMore { display:inline-flex !important; align-items:center !important; width:max-content !important; max-width:100% !important; color:var(--navy-deep) !important; transition:color .22s ease, transform .22s ease !important; } .asi-el .newsCard:hover .newsMore, .asi-el .newsCard.is-active .newsMore, .asi-el .newsMore:hover { color:var(--blue) !important; transform:translateX(3px) !important; } /* NEWS-POPUPS AUS ROUTE A UEBERNOMMEN: drei unterschiedliche Detail-Zustaende */ .asi-el .newsExpandPanel { align-items:start !important; } .asi-el .newsExpandPanel__image { position:relative !important; min-height:0 !important; height:auto !important; aspect-ratio:1.745 / 1 !important; align-self:start !important; background:#eaf2f7 !important; overflow:hidden !important; } .asi-el .newsExpandPanel__image img { width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; display:block !important; transition:opacity .18s ease !important; } .asi-el .newsExpandPanel__close:hover { background:var(--yellow) !important; color:var(--navy-deep) !important; } /* News 2: Spenden-Popup mit links buendigem Bild und Bildslider */ .asi-el .newsExpandPanel.is-donation .newsExpandPanel__image { padding:0 !important; margin:0 !important; background:#dfe9ef !important; } .asi-el .newsExpandPanel.is-donation .newsExpandPanel__image img { object-fit:cover !important; object-position:left center !important; transform:scale(1.18) !important; transform-origin:left center !important; } .asi-el .newsExpandPanel.has-image-slider .newsExpandPanel__slidePrev, .asi-el .newsExpandPanel.has-image-slider .newsExpandPanel__slideNext { display:grid !important; } .asi-el .newsExpandPanel__slidePrev, .asi-el .newsExpandPanel__slideNext { position:absolute !important; top:50% !important; transform:translateY(-50%) !important; width:58px !important; height:58px !important; border:1px solid rgba(255,255,255,.78) !important; border-radius:50% !important; display:none; place-items:center; background:rgba(255,255,255,.88) !important; color:var(--navy-deep) !important; font-size:48px !important; font-weight:300 !important; line-height:.75 !important; cursor:pointer; box-shadow:0 16px 36px rgba(0,39,70,.22) !important; clip-path:none !important; z-index:5; backdrop-filter:blur(8px); transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease !important; } .asi-el .newsExpandPanel__slidePrev { left:22px !important; } .asi-el .newsExpandPanel__slideNext { right:22px !important; } .asi-el .newsExpandPanel__slidePrev:hover, .asi-el .newsExpandPanel__slidePrev:focus-visible { transform:translateY(-50%) translateX(-4px) !important; background:#fff !important; color:var(--blue) !important; box-shadow:0 22px 48px rgba(0,39,70,.28) !important; } .asi-el .newsExpandPanel__slideNext:hover, .asi-el .newsExpandPanel__slideNext:focus-visible { transform:translateY(-50%) translateX(4px) !important; background:#fff !important; color:var(--blue) !important; box-shadow:0 22px 48px rgba(0,39,70,.28) !important; } .asi-el .newsExpandPanel__dots { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:none; gap:9px; z-index:6; padding:9px 13px; border-radius:999px; background:rgba(0,39,70,.42); backdrop-filter:blur(8px); } .asi-el .newsExpandPanel.has-image-slider .newsExpandPanel__dots { display:flex; } .asi-el .newsExpandPanel__dot { width:9px; height:9px; border:0; border-radius:999px; padding:0; background:rgba(255,255,255,.72); cursor:pointer; transition:width .2s ease, background .2s ease; } .asi-el .newsExpandPanel__dot.is-active { width:24px; background:var(--blue); } .asi-el .newsExpandPanel__image.is-changing img { opacity:.32; } /* News 3: Award-Popup mit Siegel-Darstellung und mehr Platz fuer Text */ .asi-el .newsExpandPanel.is-award.open { max-height:860px !important; } .asi-el .newsExpandPanel.is-award .newsExpandPanel__image { align-self:start !important; background:#F7FAFC !important; } .asi-el .newsExpandPanel.is-award .newsExpandPanel__image img { object-fit:contain !important; object-position:center center !important; padding:26px !important; background:#F7FAFC !important; transform:none !important; } .asi-el .newsExpandPanel.is-award .newsExpandPanel__text { max-width:690px !important; } @media (max-width:900px){ .asi-el .newsExpandPanel__image { min-height:0 !important; height:auto !important; aspect-ratio:1.745 / 1 !important; } .asi-el .newsExpandPanel__slidePrev, .asi-el .newsExpandPanel__slideNext { width:48px !important; height:48px !important; font-size:40px !important; } .asi-el .newsExpandPanel.is-award .newsExpandPanel__image img { padding:22px !important; } } @media (prefers-reduced-motion: reduce){ .asi-el .newsExpandPanel__slidePrev, .asi-el .newsExpandPanel__slideNext, .asi-el .newsExpandPanel__dot, .asi-el .newsExpandPanel__image img { transition:none !important; } } /* Korrektur: Karriere-CTA-Verlaufslinie oben statt links – konsistent mit den weißen Proof-Modulen */ .asi-el .careerCta .ctaPanel { position:relative !important; overflow:hidden !important; } .asi-el .careerCta .ctaPanel::before { content:"" !important; position:absolute !important; left:0 !important; right:auto !important; top:0 !important; bottom:auto !important; width:100% !important; height:8px !important; border-radius:0 !important; background:linear-gradient(90deg, var(--yellow) 0%, var(--blue) 100%) !important; z-index:4 !important; pointer-events:none !important; } .asi-el .careerCta .ctaCopy, .asi-el .careerCta .ctaImage { position:relative !important; z-index:2 !important; } /* V-Korrektur: Zertifikats-Popups wie Karriereseite mit Inhaltsbereich */ .asi-el .quickItem .certBadge { cursor:zoom-in !important; } .asi-el .certLightbox { padding:48px !important; background:rgba(0,39,70,.72) !important; backdrop-filter:blur(8px) !important; } .asi-el .certLightbox__panel { width:min(980px, 92vw) !important; max-width:min(980px, 92vw) !important; max-height:86vh !important; padding:0 !important; overflow:hidden !important; display:grid !important; grid-template-columns:0.92fr 1.08fr !important; background:#fff !important; border-radius:28px !important; box-shadow:0 38px 100px rgba(0,0,0,.32) !important; } .asi-el .certLightbox__media { min-height:520px !important; padding:42px !important; display:grid !important; place-items:center !important; background:linear-gradient(180deg,#f7fbfd 0%, #edf4f8 100%) !important; } .asi-el .certLightbox__media img { max-width:100% !important; max-height:62vh !important; width:auto !important; height:auto !important; object-fit:contain !important; border-radius:14px !important; box-shadow:0 16px 44px rgba(0,39,70,.10) !important; background:#fff !important; } .asi-el .certLightbox__copy { position:relative !important; padding:54px 58px 48px !important; color:var(--navy-deep) !important; } .asi-el .certLightbox__copy:before { content:"" !important; position:absolute !important; left:0 !important; top:0 !important; right:0 !important; height:8px !important; background:linear-gradient(90deg,var(--yellow) 0%, var(--blue) 100%) !important; } .asi-el .certLightbox__eyebrow { display:block !important; color:var(--blue) !important; font-size:12px !important; font-weight:950 !important; letter-spacing:.16em !important; text-transform:uppercase !important; margin-bottom:14px !important; } .asi-el .certLightbox__title { margin:0 0 12px !important; color:var(--navy-deep) !important; font-size:36px !important; line-height:1.05 !important; letter-spacing:-.045em !important; font-weight:950 !important; } .asi-el .certLightbox__subtitle { margin:0 0 24px !important; color:#516779 !important; font-size:18px !important; line-height:1.55 !important; font-weight:750 !important; } .asi-el .certLightbox__text { display:grid !important; gap:14px !important; color:#516779 !important; font-size:16px !important; line-height:1.65 !important; } .asi-el .certLightbox__text p { margin:0 !important; color:#516779 !important; } .asi-el .certLightbox__facts { display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px !important; margin-top:28px !important; } .asi-el .certLightbox__fact { padding:16px 18px !important; background:#F4F8FB !important; border:1px solid rgba(0,39,70,.08) !important; border-radius:16px !important; } .asi-el .certLightbox__fact b { display:block !important; color:var(--navy-deep) !important; font-size:13px !important; font-weight:950 !important; text-transform:uppercase !important; letter-spacing:.08em !important; margin-bottom:5px !important; } .asi-el .certLightbox__fact span { display:block !important; color:#516779 !important; font-size:14px !important; line-height:1.35 !important; font-weight:750 !important; } .asi-el .certLightbox__close { top:20px !important; right:20px !important; width:46px !important; height:46px !important; border:0 !important; border-radius:50% !important; background:var(--yellow) !important; color:var(--navy-deep) !important; font-size:28px !important; font-weight:900 !important; line-height:1 !important; z-index:5 !important; } .asi-el .certLightbox__close:hover { background:var(--blue) !important; color:#fff !important; transform:scale(1.06) !important; } @media (max-width:900px){ .asi-el .certLightbox { padding:28px !important; } .asi-el .certLightbox__panel { grid-template-columns:1fr !important; max-height:88vh !important; overflow:auto !important; } .asi-el .certLightbox__media { min-height:auto !important; padding:34px 30px !important; } .asi-el .certLightbox__media img { max-height:42vh !important; } .asi-el .certLightbox__copy { padding:38px 30px 34px !important; } .asi-el .certLightbox__title { font-size:30px !important; } .asi-el .certLightbox__facts { grid-template-columns:1fr !important; } } /* Korrektur: Kennzahlen-/Proof-Module weiss und ohne Schattierungen */ .asi-el .why .proofTile, .asi-el .why .proofTile:nth-child(2), .asi-el .why .proofTile:nth-child(3), .asi-el .why .proofTile:nth-child(5), .asi-el .why .proofTile.statTile { background:#fff !important; background-image:none !important; box-shadow:none !important; border:1px solid rgba(0,39,70,.08) !important; color:var(--navy-deep) !important; transform:none !important; } .asi-el .why .proofTile::before { content:none !important; display:none !important; background:none !important; } .asi-el .why .proofTile::after { content:"" !important; display:block !important; position:absolute !important; left:0 !important; top:0 !important; width:44% !important; height:9px !important; background:var(--yellow) !important; clip-path:polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%) !important; z-index:1 !important; } .asi-el .why .proofTile small, .asi-el .why .proofTile strong, .asi-el .why .proofTile.statTile strong { color:var(--navy-deep) !important; } .asi-el .why .proofTile small { color:var(--blue) !important; } .asi-el .why .proofTile span { color:#516779 !important; } .asi-el .why .proofTile:hover, .asi-el .why .proofTile.statTile:hover { transform:translateY(-3px) !important; box-shadow:none !important; border-color:rgba(0,39,70,.12) !important; background:#fff !important; } /* Korrektur: weisse Proof-Module behalten die farbigen Verlaufslinien */ .asi-el .why .proofTile::after { content:"" !important; display:block !important; position:absolute !important; left:0 !important; top:0 !important; width:100% !important; height:5px !important; background:linear-gradient(90deg, var(--yellow) 0%, var(--blue) 100%) !important; clip-path:none !important; transform:none !important; z-index:1 !important; } /* ========================================================================= ASI-Anpassungen fuer den Einsatz in Avada Das Mockup war ein statischer 1440px-Export. Hier werden die festen Breiten in ein fluides Raster ueberfuehrt. !important ist noetig, weil das Mockup selbst in den spaeteren Korrekturbloecken !important nutzt. ========================================================================= */ .asi-el { width: 100% !important; max-width: none !important; margin: 0 !important; background: transparent !important; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } .asi-el--hero { overflow: hidden !important; } .asi-el .wrap { width: min(1200px, calc(100% - 48px)) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; } .asi-el .quick .wrap { width: min(1190px, calc(100% - 48px)) !important; } .asi-el img { max-width: 100%; height: auto; } .asi-el a { text-decoration: none; } .asi-el a.quickItem { color: inherit !important; text-decoration: none !important; } /* Hero: Split-Grid faellt unter 1100px auf eine Spalte */ @media (max-width: 1100px) { .asi-el .hero .wrap { grid-template-columns: 1fr !important; gap: 34px !important; padding-top: 58px !important; padding-bottom: 40px !important; } .asi-el .heroVisual { min-height: 0 !important; } .asi-el .heroPhoto { position: relative !important; right: auto !important; top: auto !important; left: auto !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; } .asi-el .heroPhoto img { position: relative !important; width: 100% !important; height: 100% !important; object-fit: cover; } .asi-el .heroInset { display: none !important; } .asi-el .heroCopy { padding-top: 0 !important; } .asi-el .hero { min-height: 0 !important; } } @media (max-width: 760px) { .asi-el h1 { font-size: 40px !important; } .asi-el h2 { font-size: 32px !important; } .asi-el .heroBtns { flex-wrap: wrap !important; } .asi-el .heroBtns .btn { width: 100%; justify-content: center; } } /* Quickbar: Spaltenzahl per Element-Option */ .asi-el--cols-3 .quickGrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .asi-el--cols-2 .quickGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .asi-el--cols-1 .quickGrid { grid-template-columns: 1fr !important; } @media (max-width: 1100px) { .asi-el--cols-4 .quickGrid, .asi-el--cols-3 .quickGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 720px) { .asi-el--cols-4 .quickGrid, .asi-el--cols-3 .quickGrid, .asi-el--cols-2 .quickGrid { grid-template-columns: 1fr !important; } } /* Quickbar: Ueberlappung und Hintergrund steuerbar */ .asi-el--no-overlap .quick { margin-top: 0 !important; } .asi-el--qbg-transparent .quick { background: transparent !important; } .asi-el--qbg-white .quick { background: #ffffff !important; } /* Zertifikat-Lightbox haengt am body und braucht einen eigenen Wrapper */ .asi-certLightbox-root { position: relative; z-index: 100000; } /* ------------------------------------------------------------------------- Header als eigenstaendiges Element (Avada Layout Section) Im Mockup lag der Header absolut ueber dem Hero. Als Layout Section muss er im Fluss stehen und eine eigene Hoehe haben. ------------------------------------------------------------------------- */ .asi-el--header .header { position: relative !important; top: auto !important; left: auto !important; right: auto !important; height: auto !important; min-height: 104px !important; pointer-events: auto !important; } .asi-el--header .nav { height: 104px !important; } .asi-el--header-sticky { position: sticky !important; top: 0; z-index: 1000; } /* Hintergrund explizit setzen. Das Mockup faerbt den Header unter 1100px hellblau (#F7FBFD) und der Wrapper ist sonst transparent - beides wuerde den weissen Header im Layout durchscheinen lassen. */ .asi-el--header:not(.asi-el--header-transparent), .asi-el--header:not(.asi-el--header-transparent) .header, .asi-el--header:not(.asi-el--header-transparent) .nav { background: #ffffff !important; } .asi-el--header-transparent, .asi-el--header-transparent .header, .asi-el--header-transparent .nav { background: transparent !important; box-shadow: none !important; border-bottom: 0 !important; } .asi-el--header .brand { flex: 0 0 auto; } /* Menue-Button (mobil) */ .asi-el--header .asiNavToggle { display: none; appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 10px; margin: 0; cursor: pointer; color: var(--navy-deep); } .asi-el--header .asiNavToggle__bars { display: block; width: 26px; } .asi-el--header .asiNavToggle__bars span { display: block; height: 3px; border-radius: 99px; background: currentColor; transition: transform .2s ease, opacity .2s ease; } .asi-el--header .asiNavToggle__bars span + span { margin-top: 5px; } .asi-el--header .asiNavToggle[aria-expanded="true"] .asiNavToggle__bars span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .asi-el--header .asiNavToggle[aria-expanded="true"] .asiNavToggle__bars span:nth-child(2) { opacity: 0; } .asi-el--header .asiNavToggle[aria-expanded="true"] .asiNavToggle__bars span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Mobilmenue */ .asi-el--header .asiNavMobile { background: #fff; border-top: 1px solid rgba(0, 55, 96, .08); box-shadow: 0 18px 34px rgba(0, 39, 70, .08); padding: 10px 0 22px; } .asi-el--header .asiNavMobile[hidden] { display: none !important; } .asi-el--header .asiNavMobile .wrap { display: flex; flex-direction: column; } .asi-el--header .asiNavMobile a { display: block; padding: 13px 0; font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--navy-deep); border-bottom: 1px solid rgba(0, 55, 96, .07); } .asi-el--header .asiNavMobile a.career { margin-top: 14px; border-bottom: 0; text-align: center; background: var(--yellow); padding: 15px 22px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 100%, 0 100%); } @media (min-width: 901px) { .asi-el--header .asiNavMobile { display: none !important; } } @media (max-width: 900px) { .asi-el--header .navlinks { display: none !important; } .asi-el--header .asiNavToggle { display: block !important; } .asi-el--header .header { min-height: 76px !important; } .asi-el--header .nav { height: auto !important; min-height: 76px !important; padding: 12px 0 !important; } .asi-el--header .logoBox img { width: 152px !important; max-width: 152px !important; } } /* ------------------------------------------------------------------------- Footer als eigenstaendiges Element ------------------------------------------------------------------------- */ .asi-el--fcols-1 .footerGrid { grid-template-columns: 1.45fr 1fr !important; } .asi-el--fcols-2 .footerGrid { grid-template-columns: 1.45fr .7fr .7fr !important; } .asi-el--fcols-3 .footerGrid { grid-template-columns: 1.45fr .7fr .7fr .7fr !important; } .asi-el--footer .socials a.socialLink { display: block; line-height: 0; } .asi-el--footer-compact .footer { padding-top: 56px !important; } @media (max-width: 900px) { .asi-el--footer .footerGrid { grid-template-columns: 1fr !important; gap: 32px !important; } .asi-el--footer .footer { padding-top: 86px !important; } } @media (max-width: 600px) { .asi-el--footer .footerBottom { flex-direction: column; gap: 8px; } } /* ------------------------------------------------------------------------- Notfall-Faehnchen als eigenstaendiges Element Der Wrapper steht im Fluss und ist 0 Pixel hoch, das Faehnchen selbst liegt per position:fixed ueber dem Inhalt. Abstaende kommen als Custom Properties vom Element, weil das Layout-CSS !important nutzt. ------------------------------------------------------------------------- */ .asi-el--emergency { height: 0 !important; overflow: visible !important; } .asi-el--emergency .emergencyFlag { position: fixed !important; top: auto !important; bottom: var(--asi-flag-edge, 28px) !important; } .asi-el--flag-bottom-right .emergencyFlag { right: var(--asi-flag-side, 28px) !important; left: auto !important; } .asi-el--flag-bottom-left .emergencyFlag { left: var(--asi-flag-side, 28px) !important; right: auto !important; } .asi-el--flag-bottom-center .emergencyFlag { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; } .asi-el--flag-bottom-center .emergencyFlag:hover { transform: translateX(-50%) translateY(-4px) !important; } @media (max-width: 600px) { .asi-el--emergency .emergencyFlag { height: 50px !important; padding: 0 18px !important; } } /* Im Live Builder keine Scroll-Reveals abwarten */ .fusion-builder-live .asi-el .reveal, .asi-el .reveal.in-view { opacity: 1 !important; transform: none !important; }