@charset "utf-8";:root{--orange:#ff6a00;--orange-dark:#e85e00;--ink:#17212b;--muted:#66717d;--line:#e7ebef;--soft:#f6f8fa;--white:#fff;--shadow:0 10px 28px rgba(18,27,35,.08);--radius:18px;--container:1420px} .container{width:min(var(--container),calc(100% - 48px));margin-inline:auto} .section-spaced{padding-block:35px} .icono-h1{display:inline-block;position:relative;top:-2px;margin-right:3px;color:#1787c4;font-size:.85em} .about-section .container{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 36px} .intro h2 span,.section-title em{color:var(--orange);font-style:normal} .section-title{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;margin-bottom:34px} .section-title span{height:2px;background:linear-gradient(90deg,transparent,var(--orange))} .section-title span:last-child{background:linear-gradient(90deg,var(--orange),transparent)} .section-title h2{margin:0;text-transform:uppercase;font-size:1.5rem;letter-spacing:.02em} .service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px} .service-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.25s ease} .service-card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(18,27,35,.12)} .service-image{height:190px;position:relative;overflow:hidden;padding:0} .service-image img{width:100%;height:calc(100% + 2px);object-fit:cover;object-position:center 0px;display:block;transition:transform .4s ease} .service-image:after{content:"";position:absolute;inset:auto 0 0;height:4px;background:var(--orange)} .service-image span{font-size:3.2rem;filter:drop-shadow(0 6px 15px rgba(0,0,0,.3))} .service-body h3{margin:0 0 10px;font-size:1.12rem;line-height:1.3} .service-body a{color:var(--orange);font-weight:800;font-size:.9rem} @media (max-width:1180px){.service-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:900px){.section-spaced{padding-block:56px}} @media (max-width:680px){.container{width:min(100% - 28px,var(--container))} .about-section .container{padding:24px 20px} .service-grid,.news-grid{grid-template-columns:1fr} .service-image{height:170px} .section-title{gap:10px} .section-title h2{font-size:1.1rem;text-align:center}} .service-card{display:flex;flex-direction:column} .service-body{padding:24px;text-align:center;display:flex;flex-direction:column;flex:1} .service-body p{color:#5d6872;font-size:.92rem;min-height:0;margin:0 0 22px;flex:1} .service-body>a{display:inline-flex;align-items:center;justify-content:center;align-self:center;gap:9px;min-width:150px;margin-top:auto;padding:10px 18px;color:#17212b;background:#fff;border:1px solid #dfe4e8;border-radius:9px;font-size:.84rem;font-weight:800;line-height:1;box-shadow:0 4px 12px rgba(18,27,35,.05);transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease} .service-body>a::after{content:"→";color:var(--orange);font-size:1.05rem;font-weight:900;transition:transform .2s ease,color .2s ease} .service-body>a:hover,.service-body>a:focus-visible{color:#fff;background:var(--orange);border-color:var(--orange);transform:translateY(-2px);box-shadow:0 8px 18px rgba(255,106,0,.20)} .service-body>a:hover::after,.service-body>a:focus-visible::after{color:#fff;transform:translateX(3px)} .service-body>a:focus-visible{outline:3px solid rgba(255,106,0,.20);outline-offset:3px} .service-card:hover .service-image img{transform:none} @media (hover:hover) and (pointer:fine){.service-card{transform-origin:center;transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,border-color .28s ease} .service-card:hover{transform:translateY(-6px) scale(1.025);border-color:rgba(255,106,0,.28);box-shadow:0 20px 42px rgba(18,27,35,.14);z-index:2}} @media (max-width:680px){#partner .section-title{display:block !important;margin-bottom:20px !important;text-align:center !important} #partner .section-title>span{display:none !important} #partner .section-title h2{display:block !important;width:100% !important;margin:0 !important;padding:0 !important;font-size:clamp(10px,3.05vw,14px) !important;line-height:1.15 !important;letter-spacing:-0.25px !important;white-space:nowrap !important;text-align:center !important} #partner .section-title h2 em{display:inline !important;white-space:nowrap !important}} @media (min-width:901px){#ueber-uns .container{max-width:none !important}} @media (orientation:landscape) and (max-width:980px) and (max-height:520px){#partner .section-title{margin-bottom:18px !important;gap:12px !important} #partner .section-title h2{font-size:15px !important;line-height:1.1 !important;white-space:nowrap !important}} @media (orientation:landscape) and (max-width:980px) and (max-height:520px){.service-navigation-sticky>.container{overflow:visible !important}} @media (min-width:981px){.service-navigation-sticky>.container{overflow:visible !important}} .content-section.content-section-soft{background:linear-gradient(180deg,#fbfcfd 0%,#f6f8fa 100%);border-block:1px solid var(--line)} .content-header h2,.content-header h3{margin:0 0 14px;color:var(--ink);line-height:1.15;letter-spacing:-.02em} .content-header h2{font-size:clamp(1.8rem,3vw,2.55rem);text-transform:uppercase} .content-header h1 em,.content-header h2 em,.content-header h3 em{color:var(--orange);font-style:normal} @media (max-width:520px){.content-header h2{font-size:1.6rem}} @media screen and (orientation:landscape) and (max-width:1600px){#leistungen .service-grid{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;grid-auto-flow:row !important;gap:12px !important;width:100% !important} #leistungen .service-card{width:100% !important;min-width:0 !important;max-width:none !important} #leistungen .service-image{height:120px !important} #leistungen .service-body{padding:14px 10px !important} #leistungen .service-body h3{font-size:.88rem !important;line-height:1.25 !important} #leistungen .service-body p{font-size:.76rem !important;line-height:1.4 !important;margin-bottom:14px !important} #leistungen .service-body>a{min-width:0 !important;width:100% !important;padding:9px 5px !important;font-size:.72rem !important}} @media screen and (orientation:portrait) and (max-width:680px){#leistungen .service-grid{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;grid-auto-flow:row !important;gap:12px !important;width:100% !important} #leistungen .service-card{width:100% !important;min-width:0 !important;max-width:none !important} #leistungen .service-image{height:120px !important} #leistungen .service-body{padding:14px 10px !important} #leistungen .service-body h3{font-size:.88rem !important;line-height:1.25 !important} #leistungen .service-body p{font-size:.76rem !important;line-height:1.4 !important;margin-bottom:14px !important} #leistungen .service-body>a{min-width:0 !important;width:100% !important;padding:9px 5px !important;font-size:.72rem !important}} @media screen and (min-width:681px) and (max-height:600px){html body #leistungen .container .service-grid{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;grid-template-rows:auto auto !important;grid-auto-flow:row !important;gap:10px !important;width:100% !important;max-width:none !important} html body #leistungen .service-grid .service-card{display:flex !important;width:100% !important;min-width:0 !important;max-width:100% !important;margin:0 !important} html body #leistungen .service-image{height:105px !important;min-height:105px !important} html body #leistungen .service-body{min-width:0 !important;padding:11px 8px !important} html body #leistungen .service-body h3{margin-bottom:7px !important;font-size:.77rem !important;line-height:1.2 !important;overflow-wrap:anywhere !important;hyphens:auto} html body #leistungen .service-body p{font-size:.68rem !important;line-height:1.3 !important;margin-bottom:10px !important;overflow-wrap:anywhere !important} html body #leistungen .service-body>a{width:100% !important;min-width:0 !important;padding:7px 3px !important;font-size:.65rem !important;white-space:nowrap !important}} .error404-section>.container{width:min(var(--container),calc(100% - 48px)) !important;max-width:var(--container) !important;margin-inline:auto !important} @media (max-width:980px){.error404-section>.container{width:min(var(--container),calc(100% - 36px)) !important}} @media (max-width:600px){.error404-section>.container{width:calc(100% - 28px) !important}} .content-section{position:relative;background:radial-gradient(circle at 12% 18%,rgba(255,106,0,.045),transparent 28%),linear-gradient(180deg,#fbfcfd 0%,#f6f8fa 100%)} .content-section .content-box{position:relative;width:100%;padding:0 40px 40px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 14px 34px rgba(18,27,35,.08);overflow:hidden} .content-section .content-box::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--orange),#ff9a4d)} .content-header{margin:0 -40px 32px;padding:32px 40px 26px;background:linear-gradient(180deg,#fff 0%,#fcfdfe 100%);border-bottom:1px solid var(--line)} .content-header h1{width:fit-content;position:relative;margin:0;padding:0 0 12px;color:var(--ink);font-size:clamp(1.4rem,1.8vw,1.8rem);line-height:1.15;font-weight:900;letter-spacing:-.015em;text-align:left !important} .content-header h1::after{content:"";position:absolute;left:0;bottom:0;width:105%;height:3px;border-radius:3px;background:#1787c4} .content-body{display:flow-root;color:#505c67;font-size:1rem;line-height:1.75} .content-body p{margin:0 0 20px} .content-body p:last-child{margin-bottom:0} .content-body h2,.content-body h3{color:var(--ink);line-height:1.25;font-weight:900} .content-body h2{margin:28px 0 14px;font-size:1.45rem} .content-body h3{margin:25px 0 12px;font-size:1.18rem} @media (max-width:900px){.content-section .content-box{padding:0 30px 32px} .content-header{margin:0 -30px 28px;padding:28px 30px 23px}} @media (max-width:680px){.content-section .content-box{padding:0 20px 26px;border-radius:18px} .content-header{margin:0 -20px 24px;padding:25px 20px 20px} .content-header h1{font-size:clamp(.68rem,3.35vw,1.25rem);line-height:1.12;letter-spacing:-.035em;white-space:nowrap;max-width:100%;text-align:left !important} .content-header h1 .icono-h1{font-size:.82em;margin-right:1px} .content-body{font-size:.96rem}} @media screen and (orientation:landscape) and (min-width:981px) and (max-width:1600px) and (min-height:601px){#leistungen .service-grid{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;grid-auto-flow:row !important;gap:28px !important;width:100% !important;max-width:none !important} #leistungen .service-card{width:100% !important;min-width:0 !important;max-width:none !important} #leistungen .service-image{height:190px !important;min-height:190px !important} #leistungen .service-body{padding:24px !important} #leistungen .service-body h3{margin:0 0 10px !important;font-size:1.12rem !important;line-height:1.3 !important} #leistungen .service-body p{font-size:.92rem !important;line-height:1.55 !important;margin:0 0 22px !important} #leistungen .service-body>a{width:auto !important;min-width:150px !important;padding:10px 18px !important;font-size:.84rem !important}} .content-section.service-links-section{padding-top:24px} .hosting-awards{width:100%;margin:20px 0 35px} .hosting-awards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;align-items:center} .hosting-awards>a{display:block;width:100%} .hosting-awards img{display:block;width:100%;max-width:229px;height:auto;margin:0 auto} @media (max-width:767px){.hosting-awards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}} .hosting-section-title{margin-top:45px;margin-bottom:28px} .hosting-service-grid .service-card{height:100%} .hosting-service-grid .service-image{aspect-ratio:1240 / 450;height:auto;overflow:hidden} .hosting-service-grid .service-image a{display:block;width:100%;height:100%} .hosting-service-grid .service-image img{display:block;width:100%;height:100%;object-fit:contain} .hosting-service-grid .service-body{display:flex;flex-direction:column;height:100%} .hosting-service-grid .service-body p{flex:1}