@font-face{font-family:inter;src:url(../fonts/inter.ttf);font-display:swap}@font-face{font-family:stalker1;src:url(../fonts/stalker1.woff);font-display:swap}:root{--blue:#038a99;--light-blue:#04c4d9;--gray:#707070;--light-gray:#ebeff3;--dark-gray:#232323;--hexagon-black:url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='-105 -105 210 210' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpolygon points='-105,0 -105,-100 40,-100 100,0 40,100 -105,100' fill='black' /%3E%3C/svg%3E");--hexagon-black-90:url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='-100 -101 200 202' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet'%3E%3Cpolygon points='0,-100 86.6,-50 86.6,50 0,100 -86.6,50 -86.6,-50' fill='black' /%3E%3C/svg%3E");--hexagon:url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='-100 -101 200 202' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet'%3E%3Cpolygon points='0,-100 86.6,-50 86.6,50 0,100 -86.6,50 -86.6,-50' fill='none' stroke='%23707070' stroke-width='1' /%3E%3C/svg%3E");--hexagon-fill:url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='-100 -101 200 202' xmlns='http://www.w3.org/2000/svg' %3E%3Cpolygon points='0,-100 86.6,-50 86.6,50 0,100 -86.6,50 -86.6,-50' fill='none' stroke='%23707070' stroke-width='0.5' /%3E%3C/svg%3E");--hexagon-fill-2:url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='-100 -101 200 202' xmlns='http://www.w3.org/2000/svg' %3E%3Cpolygon points='0,-100 86.6,-50 86.6,50 0,100 -86.6,50 -86.6,-50' fill='%23ebeff3' stroke='%23707070' stroke-width='0.5' /%3E%3C/svg%3E");--hexagon-filled:url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='-100 -101 200 202' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet'%3E%3Cpolygon points='0,-100 86.6,-50 86.6,50 0,100 -86.6,50 -86.6,-50' fill='%23232323' stroke-width='1' /%3E%3C/svg%3E");--hexagon-filled-stroke:url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='-100 -101 200 202' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet'%3E%3Cpolygon points='0,-100 86.6,-50 86.6,50 0,100 -86.6,50 -86.6,-50' fill='%23ebeff3' stroke='%23232323' stroke-width='1' /%3E%3C/svg%3E");--hexagon-90:url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='-105 -105 210 210' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpolygon points='-100,0 -75,-100 75,-100 100,0 75,100 -75,100' fill='black' /%3E%3C/svg%3E");--hexagon-dash:url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='-100 -101 200 202' xmlns='http://www.w3.org/2000/svg' %3E%3Cpolygon points='0,-100 86.6,-50 86.6,50 0,100 -86.6,50 -86.6,-50' fill='none' stroke='%23232323' stroke-width='3' stroke-dasharray='10, 4' /%3E%3C/svg%3E");--hexagon-fill-blue:url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='-100 -101 200 202' xmlns='http://www.w3.org/2000/svg' %3E%3Cpolygon points='0,-100 86.6,-50 86.6,50 0,100 -86.6,50 -86.6,-50' fill='%2304c4d9' /%3E%3C/svg%3E");--line-dash:url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='100' x2='200' y2='100' stroke='cyan' stroke-width='200' stroke-dasharray='5 5'/%3E%3C/svg%3E");--triangle:url("data:image/svg+xml,%3Csvg width='91' height='120' viewBox='0 0 91 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0 38 L 91 0 L 91 120 Z' stroke='%23232323' fill='none' /%3E%3C/svg%3E%0A");--triangle-reversed:url("data:image/svg+xml,%3Csvg width='91' height='120' viewBox='0 0 91 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0 0 L 0 120 L 91 38 Z' stroke='%23232323' fill='none' /%3E%3C/svg%3E%0A");--triangle-mask:url("data:image/svg+xml,%3Csvg width='100%25' height='3vw' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 50,100 100,0' fill='black'%3E%3C/polygon%3E%3C/svg%3E")}body{background-color:var(--light-gray);margin:0}h1,h2,h3{font-family:inter,sans-serif}p,span{font-family:inter,sans-serif}.mono:is(p,span,h2,h1,a),.mono :is(p,span,h2,h1,a){letter-spacing:15%;font-family:stalker1,monospace;line-height:1.2em}h1,h2,h3,h4,p,span{color:var(--dark-gray)}.dark :is(h1,h2,h3,h4,p,span){color:var(--light-gray)}h2{font-size:1.38vw}p{font-size:1vw}svg{display:block}a{text-decoration:none}.hover{cursor:pointer}.button{display:inline-block;text-align:center;line-height:3vw;background-color:initial;height:3vw;min-width:calc(8vw - 2vw);padding:0 1vw;font-size:1vw;position:relative;font-family:stalker1,monospace;letter-spacing:5%;border:2px solid var(--dark-gray);border-radius:1.5vw;text-decoration:none;color:var(--dark-gray);letter-spacing:10%;transition:background-color .2s,border .2s}.button:hover{cursor:pointer}.button:hover{background-color:var(--dark-gray);color:var(--light-gray);border-color:var(--light-gray)}@keyframes sliderAnimation{0%{left:0}16.7%{left:0}33.4%{left:-57vw}50.1%{left:-57vw}66.8%{left:-115vw}83.5%{left:-115vw}99.99999%{left:-211vw}100%{left:0}}@keyframes arrow_animation{0%{width:1vw;opacity:0}12%{width:3vw;opacity:1}25%{width:4vw;opacity:1}75%{width:4vw;opacity:1}90%{width:4vw;opacity:0}100%{width:4vw;opacity:0}}@keyframes arrow_animation1{0%{width:1vw;opacity:0}25%{width:1vw;opacity:0}37%{width:3vw;opacity:1}50%{width:4vw;opacity:1}75%{width:4vw;opacity:1}90%{width:4vw;opacity:0}100%{width:4vw;opacity:0}}@keyframes arrow_animation2{0%{width:1vw;opacity:0}50%{width:1vw;opacity:0}62%{width:3vw;opacity:1}75%{width:4vw;opacity:1}90%{width:4vw;opacity:0}100%{width:4vw;opacity:0}}form{display:grid;width:100%;grid-template-columns:1fr 1fr;gap:0 1vw;label { display: grid; grid-template-rows: 1.2vw 2vw; font-size: 0.8vw; line-height: 1.2vw; font-family: inter, sans-serif; color: var(--dark-gray); font-weight: 500; input, textarea { background-color: white; color: var(--dark-gray); font-family: inter, sans-serif; font-size: 0.8vw; font-weight: 500; padding: 1.2vw; border: none; outline: none; } select { background-color: white; color: var(--dark-gray); font-family: inter, sans-serif; font-size: 0.8vw; font-weight: 500; padding: 0 1.2vw; height: 2.5vw; border: none; outline: none; } } label.full { grid-column: span 2; } div.full { display: flex; justify-content: space-between; grid-column: span 2; } label:has(textarea) { grid-template-rows: auto; textarea { height: 3vw; resize: none; } } label:has(input[type="checkbox"]) { display: flex; padding: 1vw; align-items: center; span { margin: 0 0 0 1vw !important; font-size: 1.2vw !important; } } button { grid-column: span 2; margin-top: 1vw; justify-self: end; background-color: var(--light-gray); }}#leistung .start{background-image:url(/img/AQ_Brandshooting_5.webp);background-size:100%;background-position:0 80%}#contact .content .right{line-height:5vw;font-size:4vw}.start{background-image:url(/img/AQ_Brandshooting_4.webp);background-size:110%;background-position:0 32%;height:40vw;padding:2vw;margin:0 2vw;position:relative;h1 { font-size: 5vw; font-weight: 700; color: var(--light-gray); margin: 0; .blue { color: var(--light-blue); } } h2 { span { color: var(--light-gray); letter-spacing: 25%; } } .box:not(:has(.box-content.border)) { transform: translateY(-100%); } .box { position: absolute; top: 100%; left: 0; transform: translateY(-50%); width: 30vw; .box-content { height: 10vw; h2 { padding: 2vw; margin: 0; font-size: 1.5vw; } } .box-content.filled { width: 100%; background: linear-gradient(30deg, var(--blue) 90%, transparent 90.5%); display: flex; align-items: center; h2 { color: var(--light-gray); } } .box-content.border { width: 100%; border-top: 0; contain: paint; h2 { font-size: 1vw; border: 2px solid var(--dark-gray); color: var(--dark-gray); position: relative; } h2::after { content: ""; position: absolute; top: 100%; left: auto; right: -2vw; height: 6vw; width: 7vw; background: linear-gradient(var(--dark-gray) 2px, var(--light-gray) 2.5px); transform-origin: top left; transform: rotate(330deg); } } } .connection { position: absolute; top: 48.9vw; left: 30vw; width: 39.5vw; height: 0; border-top: 2px dashed var(--dark-gray); transform-origin: top left; transform: rotate(16.5deg); }}#leistungen .start{background-image:unset;background-color:initial}#leistung .content.heading{height:12vw;position:absolute;top:37vw;width:calc(100% - 4vw);display:grid;grid-template-columns:auto auto;grid-template-rows:7vw 5vw;.page-title { background-color: var(--light-gray); display: flex; align-items: start; clip-path: polygon(-1px -1px, calc(100% - 8vw) -1px, calc(100% + 1px) 7vw, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); height: 12vw; h1 { font-size: 4vw; line-height: 6vw; margin: 0; text-transform: uppercase; max-width: 68vw; } } span.icons { grid-column: 2; grid-row: 2; justify-self: end; display: flex; width: 100%; height: 100%; justify-content: flex-end; position: relative; .icon { width: 5vw; height: 5vw; background-position: center; background-size: 80%; background-repeat: no-repeat; } .icon.person { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --%3E%3Cpath fill='%2304c4d9' d='M5 17v-7h2v7zm6 0v-7h2v7zm-9 4v-2h20v2zm15-4v-7h2v7zM2 8V6l10-5l10 5v2zm4.45-2h11.1zm0 0h11.1L12 3.25z'/%3E%3C/svg%3E"); } .icon.business { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --%3E%3Cpath fill='%2304c4d9' d='M9.775 12q-.9 0-1.5-.675T7.8 9.75l.325-2.45q.2-1.425 1.3-2.363T12 4t2.575.938t1.3 2.362l.325 2.45q.125.9-.475 1.575t-1.5.675zm0-2h4.45L13.9 7.6q-.1-.7-.637-1.15T12 6t-1.263.45T10.1 7.6zM4 20v-2.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20zm2-2h12v-.8q0-.275-.137-.5t-.363-.35q-1.35-.675-2.725-1.012T12 15t-2.775.338T6.5 16.35q-.225.125-.363.35T6 17.2zm6 0'/%3E%3C/svg%3E"); } .icon.behoerde { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 512 512'%3E%3C!-- Icon from IonIcons by Ben Sperry - https://github.com/ionic-team/ionicons/blob/main/LICENSE --%3E%3Cpath d='M261 149.3V64H48v384h416V149.3H261zm-127.8 256H90.6v-42.7h42.6v42.7zm0-85.3H90.6v-42.7h42.6V320zm0-85.3H90.6V192h42.6v42.7zm0-85.4H90.6v-42.7h42.6v42.7zm85.2 256h-42.6v-42.7h42.6v42.7zm0-85.3h-42.6v-42.7h42.6V320zm0-85.3h-42.6V192h42.6v42.7zm0-85.4h-42.6v-42.7h42.6v42.7zm203 256H261v-42.7h42.6V320H261v-42.7h42.6v-42.7H261V192h160.4v213.3zm-37.6-170.6h-42.6v42.7h42.6v-42.7zm0 85.3h-42.6v42.7h42.6V320z' fill='%2304c4d9'/%3E%3C/svg%3E"); } } span.icons::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; bottom: 0; right: 0; background-color: var(--dark-gray); clip-path: polygon(0 0, 100% 0, 100% 100%, 6vw 100%); } span.icons::after { content: ""; position: absolute; z-index: -1; top: 0; left: 2px; bottom: 2px; right: 2px; background-color: var(--light-gray); clip-path: polygon(0 0, 100% 0, 100% 100%, 6vw 100%); }}#business .tri-box.tri-box.triangular{margin-bottom:20vw}#leistung .content .dual-box.one .box{img { clip-path: none; width: 100%; height: 30vw; object-fit: contain; }}.page .content .dual-box.one{grid-template-rows:auto;.box { display: grid; gap: 2vw; background: none; img { clip-path: none; } .box { background-color: white; padding: 2vw; h1 { margin-left: 0; } } p { background-color: white; padding: 2vw; margin: 0; font-size: 1vw; line-height: 1.3vw; margin: 0 !important; } .grid { display: grid; grid-template-columns: 10vw 10vw 10vw; grid-template-rows: 7vw; padding: 3vw; padding-left: 6vw; border-collapse: collapse; h1 { position: absolute; top: 0; left: 12vw; } div { width: 8vw; height: 5vw; padding: 1vw; position: relative; background-color: transparent; display: flex; flex-direction: column; justify-content: center; align-content: center; } div::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; background-color: var(--light-gray); } div::after { content: ""; position: absolute; top: 2px; left: 2px; bottom: 2px; right: 2px; z-index: -1; background-color: white; } div:nth-child(3n+2)::before, div:nth-child(3n+2)::after { clip-path: polygon(2vw 0, 100% 0, 100% 100%, 0 100%, 0 1vw); } div:nth-child(3n+3) { margin-left: -2px; width: calc(8vw + 4px); margin-right: -2px; } div:nth-child(3n+1)::before, div:nth-child(3n+1)::after, div:last-child::before, div:last-child::after { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1vw), calc(100% - 2vw) 100%, 0 100%); } div:nth-child(6n+5), div:nth-child(6n+6), div:nth-child(6n+7) { position: relative; left: -2vw; top: -2px; } div:nth-child(9n+8), div:nth-child(9n+9), div:nth-child(9n+10) { position: relative; left: -4vw; top: -4px; } } }}#leistung{.dual-box.one { margin-top: 10vw; grid-template-rows: auto; .box { display: grid; gap: 2vw; background: none; img { clip-path: none; grid-column: 2; grid-row: 2; } p { grid-column: span 2; background-color: white; padding: 2vw; margin: 0 !important; } .grid { display: grid; grid-template-columns: 20vw 20vw 20vw; grid-template-rows: 7vw; padding: 3vw; padding-left: 6vw; padding-right: 0; margin-left: -3vw; border-collapse: collapse; h1 { position: absolute; top: 0; left: 27vw; } div { width: 18vw; height: 5vw; padding: 1vw; position: relative; background-color: transparent; display: flex; flex-direction: column; justify-content: center; align-content: center; } div::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; background-color: var(--light-gray); } div::after { content: ""; position: absolute; top: 2px; left: 2px; bottom: 2px; right: 2px; z-index: -1; background-color: white; } div:nth-child(3n+2)::before, div:nth-child(3n+2)::after { clip-path: polygon(2vw 0, 100% 0, 100% 100%, 0 100%, 0 1vw); } div:nth-child(3n+3) { margin-left: -2px; width: calc(18vw + 4px); margin-right: -2px; } div:nth-child(3n+1)::before, div:nth-child(3n+1)::after, div:last-child::before, div:last-child::after { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1vw), calc(100% - 2vw) 100%, 0 100%); } div:nth-child(6n+5), div:nth-child(6n+6), div:nth-child(6n+7) { position: relative; left: -2vw; top: -2px; } div:nth-child(9n+8), div:nth-child(9n+9), div:nth-child(9n+10) { position: relative; left: -4vw; top: -4px; } } } }}.page .content{margin:0 2vw;h1.right { font-size: 4.5vw; text-align: right; margin: 0 0 2vw; } .seperator { margin: 5vw 0; height: 2px; width: 100%; background-color: var(--dark-gray); } h1.margin { margin-top: 5vw; } .grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; grid-template-rows: 21vw; contain: paint; .part { border: 2px solid var(--gray); #show-more-label { display: none; } .grid-content { padding: 1vw; position: relative; height: calc(100% - 2vw); display: flex; flex-direction: column; h2 { color: white; margin: 0; } .info { background: var(--light-blue); padding: 0.5vw 0.5vw 1vw; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; height: 10vw; gap: 0.5vw; h1 { font-size: 1.4vw; margin: 0; color: var(--light-gray); width: max-content; } .info span { color: var(--dark-gray); } h2 { font-size: 0.7vw; margin: 0; color: var(--light-gray); text-align: center; } .info-header { padding: 0 0 0.5vw; grid-column: span 3; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--light-gray); justify-items: center; align-items: center; span { color: var(--dark-gray); } } .info { padding: 0.5vw 0 0; display: grid; grid-template-columns: 100%; grid-template-rows: 1fr 1fr; justify-items: center; align-items: center; height: 100%; h1 { font-size: 1vw; align-self: end; } h2 { align-self: start; } } } .safety-quiz { margin-top: 3vw; width: calc(100% - 2vw); padding: 1vw; background-color: var(--light-blue); height: 8vw; display: flex; flex-direction: column; justify-content: center; h1 { margin: 0; text-align: center; } p { margin: 0; text-align: center; } } .safety-quiz.erstkontakt { height: 5vw; } .safety-quiz:has(p) { h1 { margin: 0 0 1vw; } } .safety-quiz:hover { cursor: pointer; } } .grid-content:has(.info) { justify-content: space-evenly; } .part-container { padding: 1vw; position: relative; h2 { margin: 0 0 1vw; } p { margin: 0; font-size: 1vw; } } } .part:nth-child(1) { border: none; background-color: var(--blue); } .part:nth-child(3) { border-right: none; border-left: none; } .part:nth-child(4)::after { content: ""; position: absolute; top: 100%; left: auto; right: -3vw; height: 6vw; width: 11vw; background: linear-gradient(var(--gray) 2px, var(--light-gray) 2.5px); transform-origin: top left; transform: rotate(330deg); } } .grid:has(.erstkontakt) { grid-template-rows: 18vw; } .cta { position: relative; width: 70vw; margin: 5vw auto; contain: paint; background-color: transparent; transition: background-color 0.2s; .cta-content { width: calc(100% - 4px); height: 100%; border: 2px solid var(--dark-gray); display: flex; flex-direction: column; align-items: center; gap: 2vw; padding: 3vw 0 1vw; h1 { margin: 0; font-size: 1.6vw; } } } .cta:has(.button:hover) { background-color: var(--light-blue); } .cta:has(p) { .cta-content { gap: 1vw; } } .cta::before { content: ""; position: absolute; top: auto; bottom: 100%; left: -3vw; height: 6vw; width: 11vw; background: linear-gradient(0deg, var(--dark-gray) 2px, var(--light-gray) 2.5px); transform-origin: bottom right; transform: rotate(330deg); } .cta::after { content: ""; position: absolute; top: 100%; left: auto; right: -3vw; height: 6vw; width: 11vw; background: linear-gradient(var(--dark-gray) 2px, var(--light-gray) 2.5px); transform-origin: top left; transform: rotate(330deg); } .tri-box { display: grid; grid-template-columns: 1fr 1fr 1fr; padding-top: 10vw; gap: 0; position: relative; h1 { position: absolute; top: 4.5vw; left: 50%; transform: translateX(-50%); } .box { aspect-ratio: 1 / 1.3; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2vw; background-color: var(--light-gray); transition: background-color 0.2s; .symbol-container { width: 100%; height: 15vw; } } .box:has(.button:hover) { background-color: var(--light-blue); } } .title { margin: 4vw 0; } .centered { margin: auto; width: max-content; } .tri-box.triangular { display: block; height: 79.85vw; width: calc(34.5vw * 2); padding-top: 0; margin: 5vw auto 5vw; border: none; display: grid; grid-template-columns: 34.5vw 34.5vw; grid-template-rows: 37.45vw; h1 { left: 0; transform: none; } .box { background-color: transparent; aspect-ratio: 1 / 1.1; p { margin: 0 3vw 4vw; } } .box:nth-child(2) { grid-column: 2; grid-row: 1; } .box:nth-child(3) { grid-column: 1; grid-row: 2; } .box:nth-child(4) { grid-column: 2; grid-row: 2; } .box:nth-child(5) { grid-column: 1; grid-row: 3; } .box:nth-child(3) { position: relative; top: -18.7vw; left: 2px; width: calc(100% - 4vw); } .box:nth-child(5) { position: relative; top: -18.8vw; left: 2px; width: calc(100% - 4vw); } .box:hover { background-color: transparent; } .box::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: var(--dark-gray); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); z-index: -1; } .box::after { content: ""; position: absolute; top: 2px; left: 2px; bottom: 2px; right: 2px; background-color: var(--light-gray); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); z-index: -1; } .box:has(.button:hover)::after { transition: background-color 0.2s; background-color: var(--light-blue); } } .quad-box { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1596' height='1596' viewBox='0 0 1609 1596'%3E%3Cg id='Ellipse_6' data-name='Ellipse 6' fill='none' stroke='%23232323' stroke-width='40' stroke-dasharray='1 8'%3E%3Ccircle cx='798' cy='798' r='798' stroke='none'/%3E%3Ccircle cx='798' cy='798' r='788' fill='none'/%3E%3C/g%3E%3C/svg%3E%0A"); background-size: 82%; background-position: center; background-repeat: no-repeat; width: 46vw; aspect-ratio: 1 / 1; margin: auto; position: relative; margin-top: 5vw; #earth { position: absolute; top: 50%; left: 50%; width: 50%; height: 50%; transform: translate(-50%, -50%); } .box { position: absolute; width: 10vw; height: 10vw; background-image: var(--hexagon-filled-stroke); background-size: contain; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; h1 { color: var(--dark-gray); text-align: center; font-size: 0.8vw; } .popup { display: none; } } .box:hover { background-image: var(--hexagon-filled); h1 { color: var(--light-gray); } .popup { position: absolute; top: 1.1vw; left: calc(100% + 2.6vw); padding: 0 1vw; border: 1px solid var(--dark-gray); color: var(--dark-gray); height: 4.3vw; width: 20vw; background-color: var(--light-gray); display: flex; align-items: center; } .popup::before { content: ""; position: absolute; top: -1px; right: 100%; height: calc(100% + 2px); aspect-ratio: 9.1 / 12; background-image: var(--triangle); background-size: 100% 100%; } } .box.reversed:hover { .popup { left: auto; right: calc(100% + 2.6vw); } .popup::before { left: 100%; right: auto; background-image: var(--triangle-reversed); } } .box:nth-child(2) { top: 0; left: 50%; transform: translateX(-50%); } .box:nth-child(3) { top: 50%; left: auto; right: 0; transform: translateY(-50%); } .box:nth-child(4) { top: auto; bottom: 0; left: 50%; transform: translateX(-50%); } .box:nth-child(5) { top: 50%; left: 0; transform: translateY(-50%); } } .img-box { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 2fr; height: 40vw; gap: 1vw 2vw; align-items: stretch; img { width: 100%; height: 100%; grid-row: span 2; object-fit: cover; object-position: 50% 0; } h1, h2, p { margin: 0; } p { background: white; padding: 2vw; height: max-content; } .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 2fr 4fr; background: white; padding: 2vw 1vw; h1 { grid-column: span 4; text-align: center; font-size: 2.5vw; } div { display: flex; flex-direction: column; gap: 1vw; h1 { font-size: 2vw; position: relative; } h1.connection::after { content: ""; position: absolute; top: calc(50% - 0.05vw); left: calc(100% - 2vw); width: 4vw; height: 0.5vw; clip-path: polygon(0 0.2vw, calc(100% - 1vw) 0.2vw, calc(100% - 1vw) 0, 100% 0.25vw, calc(100% - 1vw) 100%, calc(100% - 1vw) 0.3vw, 0 0.3vw); background-color: var(--light-blue); animation-duration: 3s; animation-timing-function: linear; animation-fill-mode: both; animation-iteration-count: infinite; } h2 { font-size: 1vw; text-align: center; } p { font-size: 0.8vw; padding: 0; text-align: center; } } div:nth-child(2) h1.connection::after { animation-name: arrow_animation; } div:nth-child(3) h1.connection::after { animation-name: arrow_animation1; } div:nth-child(4) h1.connection::after { animation-name: arrow_animation2; } } } .box-container { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; margin: 0 8vw 19vw; .left { position: relative; top: 20vw; } .box { width: 20vw; aspect-ratio: 1 / 1.15; background-image: var(--hexagon-fill-2); background-size: 115% 100%; background-position: center; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; .symbol-container { width: 60%; aspect-ratio: 1 / 1; margin-top: -2vw; } h1 { margin: 0; text-align: center; font-size: 1.4vw; } .description { position: absolute; top: 17.2vw; left: 50%; width: 20vw; height: 21vw; background-color: var(--dark-gray); clip-path: polygon(0 5.7vw, 9.8vw 0, 100% 0, 100% 100%, 0 100%); span { position: absolute; left: auto; right: 3vw; top: 2vw; display: flex; .icon { width: 2vw; height: 2vw; background-position: center; background-size: 90%; background-repeat: no-repeat; } .icon.person { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --%3E%3Cpath fill='%2304c4d9' d='M9.775 12q-.9 0-1.5-.675T7.8 9.75l.325-2.45q.2-1.425 1.3-2.363T12 4t2.575.938t1.3 2.362l.325 2.45q.125.9-.475 1.575t-1.5.675zm0-2h4.45L13.9 7.6q-.1-.7-.637-1.15T12 6t-1.263.45T10.1 7.6zM4 20v-2.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20zm2-2h12v-.8q0-.275-.137-.5t-.363-.35q-1.35-.675-2.725-1.012T12 15t-2.775.338T6.5 16.35q-.225.125-.363.35T6 17.2zm6 0'/%3E%3C/svg%3E"); } .icon.business { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 512 512'%3E%3C!-- Icon from IonIcons by Ben Sperry - https://github.com/ionic-team/ionicons/blob/main/LICENSE --%3E%3Cpath d='M261 149.3V64H48v384h416V149.3H261zm-127.8 256H90.6v-42.7h42.6v42.7zm0-85.3H90.6v-42.7h42.6V320zm0-85.3H90.6V192h42.6v42.7zm0-85.4H90.6v-42.7h42.6v42.7zm85.2 256h-42.6v-42.7h42.6v42.7zm0-85.3h-42.6v-42.7h42.6V320zm0-85.3h-42.6V192h42.6v42.7zm0-85.4h-42.6v-42.7h42.6v42.7zm203 256H261v-42.7h42.6V320H261v-42.7h42.6v-42.7H261V192h160.4v213.3zm-37.6-170.6h-42.6v42.7h42.6v-42.7zm0 85.3h-42.6v42.7h42.6V320z' fill='%2304c4d9'/%3E%3C/svg%3E"); } .icon.behoerde { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --%3E%3Cpath fill='%2304c4d9' d='M5 17v-7h2v7zm6 0v-7h2v7zm-9 4v-2h20v2zm15-4v-7h2v7zM2 8V6l10-5l10 5v2zm4.45-2h11.1zm0 0h11.1L12 3.25z'/%3E%3C/svg%3E"); } } p { margin: 0; padding: 6vw 2vw 0 2vw; color: var(--light-gray); } .button { color: var(--light-gray); border-color: var(--light-gray); left: 50%; transform: translateX(-50%); height: 2vw; margin-top: 1vw; line-height: 2vw; } .button:hover { background-color: var(--light-gray); color: var(--dark-gray); border-color: var(--dark-gray); } } .description.reverse { position: absolute; left: auto; right: 50%; clip-path: polygon(0 0, calc(100% - 9.8vw) 0, 100% 5.7vw, 100% 100%, 0 100%); span { left: 3vw; right: auto; } } .connection { position: absolute; top: 17.2vw; left: auto; right: 100%; width: 21.5vw; height: 0; border-top: 2px dashed var(--dark-gray); transform-origin: top right; transform: rotate(336.7deg); } .connection.reverse { position: absolute; right: auto; left: 100%; width: 29vw; height: 0; border-top: 2px dashed var(--dark-gray); transform-origin: top left; transform: rotate(21.5deg); } } .box:nth-child(n+2) { margin-top: 16.2vw; } .box:hover { .description { opacity: 1; } } .description:hover { opacity: 1; } } .dual-box { display: grid; grid-template-rows: 30vw 30vw; position: relative; margin: 5vw 0; .box { display: grid; grid-template-columns: 1fr 1fr; align-items: center; .box { background: white; margin: 3vw; padding: 1vw 0; display: flex; flex-direction: column; align-items: center; gap: 1vw; h1, p { padding: 0; } h1 { align-self: start; margin-left: 2vw; } .button { display: block; width: 9vw; } } img { width: 100%; height: 30vw; object-fit: cover; object-position: center; } p { background-color: white; padding: 2vw; font-size: 1vw; line-height: 1.3vw; margin: 0 2vw; span { font-size: 2vw; line-height: 2.3vw; font-weight: 700; } } h1 { padding: 0 2vw; margin: 0; } } .box:nth-child(1) { img { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), calc(100% - 8vw) 100%, 0 100%); } p { margin-bottom: 4vw; } } .box:nth-child(2) { img { grid-column: 2; clip-path: polygon(8vw 0, 100% 0, 100% 0, 100% 100%, 0 100%, 0 4vw); } p { grid-column: 1; grid-row: 1; margin-top: 4vw; } } } .faq { margin: 5vw 0; contain: paint; } .hidden-faq { height: 3vw; contain: paint; label { span { font-size: 1vw; line-height: 3vw; font-weight: 700; text-align: center; width: 100%; display: inline-block; } span:nth-child(1) { display: inline-block; } span:nth-child(2) { display: none; } input { display: none; } } label:has(input:checked) { span:nth-child(1) { display: none; } span:nth-child(2) { display: inline-block; } } h2:nth-child(2) { margin-top: 0; } } .hidden-faq:has(input:checked) { height: max-content; } .faq h2 { background-color: var(--gray); padding: 1vw; color: var(--light-gray); transition: all 0.2s; position: relative; margin: 1vw 0 0; } .faq h2::after { content: '\25BC'; position: absolute; top: 50%; right: 2vw; transform: translateY(-50%); color: var(--light-gray); font-size: 1vw; } .faq h2.active::after { content: '\25B2'; color: white; } .faq h2:hover { cursor: pointer; } .faq h2.active { background-color: var(--dark-gray); color: var(--light-gray); } .faq p { margin: 0; background-color: var(--dark-gray); color: var(--light-gray); height: 0; padding: 0 1vw; contain: paint; transition: all 0.2s; margin-bottom: 0; clip-path: polygon(100% 0, 100% calc(100% - 2vw), calc(100% - 5vw) 100%, 0 100%, 0 0); } .faq h2.active+p { height: auto; padding: 1vw; background-color: var(--dark-gray); color: white; margin-bottom: 2vw; } .quad-box-simple { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; position: relative; padding-top: 5vw; padding-left: 8vw; margin-left: -2px; margin-right: -2px; margin-bottom: 5vw; h1 { position: absolute; width: 100%; text-align: center; } .box { position: relative; padding: 3vw 4vw; h1 { position: static; font-size: 1.5vw; } h2 { position: absolute; top: 1vw; font-size: 1vw; right: 1vw; margin: 0; font-family: stalker1; font-weight: 400; color: var(--light-blue); } h1, p { text-align: left; } } .box::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; background-color: var(--light-gray); ; clip-path: polygon(8vw 0, 100% 0, 100% 100%, 0 100%, 0 4vw); } .box::after { content: ""; position: absolute; top: 2px; left: 2px; bottom: 2px; right: 2px; z-index: -1; clip-path: polygon(8vw 0, 100% 0, 100% 100%, 0 100%, 0 4vw); background-color: white; } .box:nth-child(3)::after, .box:nth-child(5)::after, .box:nth-child(3)::before, .box:nth-child(5)::before { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), calc(100% - 8vw) 100%, 0 100%); } .box:nth-child(3) { transform: translateX(-2px); } .box:nth-child(4) { position: relative; left: -8vw; transform: translateY(-2px); } .box:nth-child(5) { position: relative; left: -8vw; transform: translate(-2px, -2px); } } .quad-box-simple.tri { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; padding-left: 0; padding-right: 16vw; .box { h2 { left: 1vw; } } .box::before { clip-path: polygon(0 0, calc(100% - 8vw) 0, 100% 4vw, 100% 100%, 8vw 100%, 0 calc(100% - 4vw)); } .box::after { clip-path: polygon(0 0, calc(100% - 8vw) 0, 100% 4vw, 100% 100%, 8vw 100%, 0 calc(100% - 4vw)); } .box:nth-child(2) { transform: translateX(8vw); } .box:nth-child(3) { transform: translateX(16vw); } } .person-box { display: grid; grid-template-columns: 50% 50%; gap: 2vw; width: calc(100% - 37vw); margin: 0 auto 5vw; .box { background-color: white; img { width: 100%; object-fit: cover; object-position: center; aspect-ratio: 1 / 1; } h1 { padding: 1vw; margin: 0; } p { padding: 1vw; margin: 0; } } .box:nth-child(1) { clip-path: polygon(0 4vw, 8vw 0, 100% 0, 100% 100%, 0 100%); } .box:nth-child(2) { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), calc(100% - 8vw) 100%, 0 100%); } } .slider { width: 100%; contain: paint; .slider-content { width: max-content; position: relative; animation: sliderAnimation 16s linear both infinite; a { display: inline-block; margin-left: 1vw; width: 18vw; background: white; img { padding: 1vw 2vw; width: 14vw; object-fit: contain; object-position: center; } } a:nth-child(1) { margin-left: 0; } } } .list-container { display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; align-items: center; margin: 5vw 0; } .list-box { background-color: white; padding: 2vw; li { font-family: inter; font-size: 1.4vw; line-height: 2vw; position: relative; list-style-type: none; } li::before { content: ""; position: absolute; top: 0; left: -2vw; height: 2vw; width: 1vw; background: var(--hexagon-filled); background-size: 0.8vw; background-repeat: no-repeat; background-position: center; } }}#popup{position:fixed;.popup-content { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgb(0 0 0 / 50%); display: flex; align-items: center; justify-content: center; .quiz { width: 86vw; padding: 2vw; margin: auto; position: relative; background-color: var(--light-gray); .close { position: absolute; top: 1vw; left: auto; right: 1vw; font-size: 3vw; line-height: 2vw; font-weight: 700; font-family: stalker1, monospace; transform: scaleY(0.7); } h1.head { text-align: center; margin: 0 0 3vw; } img { width: 3vw; height: 3vw; object-fit: contain; position: absolute; top: calc(100% - 3vw); left: 50%; transform: translateX(-50%); z-index: 1; } #canvas-container { width: 20vw; height: 20vw; background-image: url(/img/quiz/step_3.webp); } .progress { display: flex; justify-content: center; .step { width: 6vw; .symbol { width: 6vw; height: 6vw; background: var(--hexagon-dash); background-size: 100% 100%; background-position: center; position: relative; } .symbol::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 60%; background-repeat: no-repeat; background-position: center; display: none; } h2 { font-size: 1vw; text-align: center; } } .step:nth-child(1) .symbol::after { background-image: url(/img/quiz/step_1.webp); } .step:nth-child(3) .symbol::after { background-image: url(/img/quiz/step_2.webp); } .step:nth-child(5) .symbol::after { background-image: url(/img/quiz/step_3.webp); } .step:nth-child(7) .symbol::after { background-image: url(/img/quiz/step_4.webp); } .step:nth-child(9) .symbol::after { background-image: url(/img/quiz/step_5.webp); } .step:nth-child(11) .symbol::after { background-image: url(/img/quiz/step_6.webp); } .step:nth-child(13) .symbol::after { background-image: url(/img/quiz/step_7.webp); } .connection { margin-top: 2.8vw; width: 6vw; height: 0.4vw; mask-image: var(--line-dash); mask-size: 100% 100%; mask-position: center; background: var(--dark-gray); } } .question-container { display: grid; grid-template-columns: 20vw auto; align-items: center; .question:has(span) { .button { left: -10vw; } } .question { display: flex; flex-direction: column; align-items: center; h1 { align-self: start; } span { font-family: inter, sans-serif; font-size: 1.3vw; line-height: 1.7vw; margin-bottom: 3vw; } .answers { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 5vw 5vw; width: 100%; gap: 1vw; .answer { height: 2vw; padding-left: 3vw; position: relative; line-height: 2vw; } .answer::before { content: ""; position: absolute; top: 0; left: 0; width: 2vw; height: 100%; background-color: var(--light-blue); } .answer:hover { cursor: pointer; } .answer:hover::before { content: "X"; text-align: center; font-weight: 700; font-family: inter, sans-serif; } } .answers.three { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 5vw; } } .question:has(form) { width: 100%; form { width: 90%; } } } #progress-bar { display: none; } } .quiz:has(.quiz-form) .progress { display: none; } .quiz:has(.part1), .quiz:has(.part2), .quiz:has(.part3), .quiz:has(.part4), .quiz:has(.part5), .quiz:has(.part6), .quiz:has(.part7) { .progress { .step:nth-child(1) { .symbol { background-image: var(--hexagon-fill-blue); } .symbol::after { display: block; } } .connection:nth-child(2) { background-color: var(--light-blue); } } } .quiz:has(.part2), .quiz:has(.part3), .quiz:has(.part4), .quiz:has(.part5), .quiz:has(.part6), .quiz:has(.part7) { .progress { .step:nth-child(3) { .symbol { background-image: var(--hexagon-fill-blue); } .symbol::after { display: block; } } .connection:nth-child(4) { background-color: var(--light-blue); } } } .quiz:has(.part3), .quiz:has(.part4), .quiz:has(.part5), .quiz:has(.part6), .quiz:has(.part7) { .progress { .step:nth-child(5) { .symbol { background-image: var(--hexagon-fill-blue); } .symbol::after { display: block; } } .connection:nth-child(6) { background-color: var(--light-blue); } } } .quiz:has(.part4), .quiz:has(.part5), .quiz:has(.part6), .quiz:has(.part7) { .progress { .step:nth-child(7) { .symbol { background-image: var(--hexagon-fill-blue); } .symbol::after { display: block; } } .connection:nth-child(8) { background-color: var(--light-blue); } } } .quiz:has(.part5), .quiz:has(.part6), .quiz:has(.part7) { .progress { .step:nth-child(9) { .symbol { background-image: var(--hexagon-fill-blue); } .symbol::after { display: block; } } .connection:nth-child(10) { background-color: var(--light-blue); } } } .quiz:has(.part6), .quiz:has(.part7) { .progress { .step:nth-child(11) { .symbol { background-image: var(--hexagon-fill-blue); } .symbol::after { display: block; } } .connection:nth-child(12) { background-color: var(--light-blue); } } } .quiz:has(.part7) { .progress { .step:nth-child(13) { .symbol { background-image: var(--hexagon-fill-blue); } .symbol::after { display: block; } } } } .quiz::before { content: ""; position: absolute; top: -3vw; left: 0; width: 100%; height: 3vw; background-color: var(--light-gray); clip-path: polygon(0 100%, 50% 0, 100% 100%); } .quiz::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 3vw; background-color: var(--light-gray); clip-path: polygon(0 0, 50% 100%, 100% 0); } }}@media screen and (orientation:portrait) and (max-width:900px){h1{font-size:4vw}h2{font-size:4vw}p{font-size:3vw}.button:not(#menu-button){height:6vw;line-height:6vw;font-size:3vw;width:max-content;padding:0 3vw;margin:0 0 9vw;border-radius:3vw}.page .start{height:60vw;background-position:50% 20%;margin:0 4vw;.box { width: 40vw; .box-content { height: 20vw; h2 { padding: 2vw; margin: 0; font-size: 2.5vw; } } .box-content.border { h2 { font-size: 2vw; border: 2px solid var(--dark-gray); color: var(--dark-gray); position: relative; } } } .connection { display: none; }}#business .tri-box.tri-box.triangular{margin-bottom:-20vw!important}#leistung .content.heading{top:57vw;width:calc(100% - 8vw);span.icons::after { left: 1px; bottom: 1px; right: 1px; }}#leistung .content .dual-box.one{grid-template-columns:100%;.box { grid-template-columns: 100%; grid-template-rows: auto 130vw auto; display: grid; gap: 2vw; background: none; p { grid-column: 1; grid-row: 1; } img { height: 100%; grid-column: 1; grid-row: 2; } div { grid-column: 1; grid-row: 3; } .grid { padding-top: 10vw; div:nth-child(3n+2)::before, div:nth-child(3n+2)::after { clip-path: polygon(2vw 0, 100% 0, 100% 100%, 0 100%, 0 2vw); } div:nth-child(3n+1)::before, div:nth-child(3n+1)::after, div:last-child::before, div:last-child::after { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), calc(100% - 2vw) 100%, 0 100%); } } }}.page .content{margin:0 4vw;.grid { grid-template-columns: 100%; grid-template-rows: auto auto auto auto; .part { .grid-content { h2 { font-size: 4vw; margin-bottom: 2vw; } .info { height: 30vw; h1 { font-size: 3vw !important; } h2 { font-size: 2vw; } } } .part-container { p { font-size: 3vw; } } #show-more-label { display: flex; align-items: center; justify-content: center; margin: 2vw 0; input { display: none; } .button { color: var(--light-gray); border-color: var(--light-gray); margin: 0; } } } .part:nth-child(1) { grid-row: 4; } .part:nth-child(2) { border: 2px solid var(--gray); border-bottom: none; border-width: 0; height: 0; contain: paint; transition: height 0.2s; } .part:nth-child(3) { border: 2px solid var(--gray); border-width: 0; height: 0; contain: paint; transition: height 0.2s; } .part:nth-child(4) { border: 2px solid var(--gray); border-top: none; border-width: 0; height: 0; contain: paint; transition: height 0.2s; } .part::after { content: none !important; } } .grid:has(#show-more-label input:checked) :is(.part:nth-child(2), .part:nth-child(3), .part:nth-child(4)) { border-width: 2px; height: 40vw; } .cta { position: relative; width: calc(100% - 2vw); margin: 10vw 0; contain: paint; background-color: transparent; transition: background-color 0.2s; .cta-content { width: calc(100% - 4vw - 4px); height: 100%; border: 2px solid var(--dark-gray); display: flex; flex-direction: column; align-items: center; gap: 2vw; padding: 8vw 2vw 1vw; h1 { text-align: center; font-size: 3.6vw; } } } .img-box { grid-template-columns: 100%; height: auto; gap: 5vw; img { grid-row: 2; } .grid { grid-row: 3; h1 { font-size: 5vw; } div { h1 { font-size: 6vw; } h2 { font-size: 2vw; } p { font-size: 1.5vw; } } div { h1.connection::after { content: ""; position: absolute; top: calc(50% - 0.05vw); left: calc(100% - 2vw); width: 5vw; height: 2vw; clip-path: polygon(0 0.5vw, calc(100% - 2vw) 0.5vw, calc(100% - 2vw) 0, 100% 1vw, calc(100% - 2vw) 100%, calc(100% - 2vw) 1.5vw, 0 1.5vw); } } } } .tri-box:not(.triangular) { grid-template-columns: 100%; grid-template-rows: auto; border-bottom: none; padding-top: 20vw; .box { aspect-ratio: 2 / 1; .symbol-container { height: 30vw; } } } .tri-box.triangular { width: auto; height: auto; grid-template-columns: 44.5vw 45.5vw; grid-template-rows: 49.45vw; .box { p { display: none; } h2 { font-size: 2.5vw; } } .box:nth-child(3) { top: -24.2vw; } .box:nth-child(5) { top: -25.3vw; } } .tri-box:not(.triangular) { .box { border-bottom: solid 0.1vw var(--dark-gray); } } .dual-box { grid-template-columns: 100%; grid-template-rows: 100vw 100vw; .box { grid-template-columns: 100%; img { height: 50vw; } p { height: auto; display: flex; flex-direction: column; font-size: 3vw !important; line-height: 1.2em !important; align-items: center; span { font-size: 4vw; line-height: 4vw; } } } .box:nth-child(2) { img { grid-column: 1; grid-row: 1; } p { grid-row: 2; } } } .person-box { width: 100%; } .quad-box-simple { padding-top: 12vw; .box { h2 { font-size: 2.5vw; margin: 1vw 2vw 0 0; } h1 { font-size: 3vw; line-height: 3vw; margin-top: 4vw; } } } .quad-box-simple.tri { padding-top: 3vw; .box { h2 { font-size: 2.5vw; margin: 1vw 0 0 2vw; } } } .quad-box { background-size: 85%; width: 116vw; margin: auto; position: relative; left: -30%; margin: 10vw 0; .box { width: 25vw; height: 25vw; flex-direction: column; h1 { font-size: 2vw; } span { font-size: 0.8vw; line-height: 0.9vw; } } .box:nth-child(3) { top: 36vw; left: 89vw; transform: translateY(-50%); } .box:nth-child(4) { top: auto; bottom: 36vw; left: 89vw; transform: translateY(50%); } .box:nth-child(5) { top: auto; bottom: 0; left: 50%; transform: translateX(-50%); } .box:nth-child(2):hover { transform: translateX(-50%) scale(1.8); } .box:nth-child(3):hover { transform: translateY(-50%) scale(1.8); } .box:nth-child(4):hover { transform: translateY(50%) scale(1.8); } .box:nth-child(5):hover { transform: translateX(-50%) scale(1.8); } .box:hover h1 { font-size: 1.6vw; } .box:hover .popup { position: static; display: block; background: none; padding: 0; margin: 0; border: 0; height: unset; width: 14vw; line-height: 0; span { font-size: 1vw; line-height: 1vw; color: var(--light-gray); } } .box:hover .popup::before { content: none; } } .box-container { .left { top: 30vw; } .box { width: 30vw; .connection { top: 25.2vw; width: 15.5vw; transform: rotate(303deg); } .connection.reverse { top: 25.2vw; width: 19.5vw; transform: rotate(63deg); } .description { top: 25.5vw; width: 28vw; height: 36vw; clip-path: polygon(0 8.7vw, 14.8vw 0, 100% 0, 100% 100%, 0 100%); p { margin: 0; padding: 10vw 2vw 0 2vw; color: var(--light-gray); font-size: 1.6vw; } .button { font-size: 2vw !important; padding: 0 3vw !important; line-height: 4vw !important; height: 4vw !important; margin: 2vw 0 !important; border-width: 1px !important; } } .description.reverse { clip-path: polygon(0 0, calc(100% - 14.8vw) 0, 100% 8.7vw, 100% 100%, 0 100%); } } .box:nth-child(n+2) { margin-top: 30vw; } } .faq { h2 { font-size: 3vw; padding: 2vw; } p { font-size: 2vw; } h2.active+p { padding: 2vw; } } .hidden-faq { height: 5vw; label { span { font-size: 4vw; line-height: 5vw; } } }}#leistungen{.left { .grid-content { padding-bottom: 18vw; .safety-quiz { top: 25vw; width: calc(100% - 14vw); left: 7vw; .grid-content { padding: 2vw; svg { height: 2vw; } h1 { margin: 0; } p { display: none; } } } } }}#private,#business{.left { .grid-content { padding: 7vw 7vw 4vw; .safety-quiz { top: 25.3vw; left: unset; width: calc(100% - 14vw); svg { display: none; } h1 { margin: 0; } p { display: none; } .grid-content { padding: 2vw; } } } }}.page .content .box-container{margin-bottom:36vw}#leistung .dual-box.one{.box { .grid { grid-template-columns: 30vw 30vw 30vw; grid-template-rows: auto; div { width: 22vw; grid-column: auto; grid-row: auto; height: 20vw; padding: 4vw; span { font-size: 3vw; } } div:nth-child(3n+3) { width: calc(23vw + 4px); } } }}#popup .popup-content .quiz .close{top:2vw;right:2vw;font-size:7vw}#popup{.popup-content { .quiz { .question-container { .question { .answers, .answers.three { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; .answer { line-height: 3.5vw; } .answer:hover::before { content: ""; } } .button { height: 6vw; line-height: 3vw; font-size: 2vw; width: 35vw; } span { font-size: 2.3vw; line-height: 3.7vw; } } } } }}form{gap:2vw 0;label { grid-column: span 2; grid-template-rows: 6vw; input, textarea, select { font-size: 3vw; } select { height: 6vw; } textarea { height: 40vw; } } label:has(textarea) { textarea { height: 40vw; } } label:has(input[type="checkbox"]) { span { font-size: 3vw !important; line-height: 3.2vw !important; } } div.full { flex-direction: column; .button { align-self: end; } }}}@keyframes binaryAnimation{0%{left:0}100%{left:-82vw}}#footer{margin-top:5vw;margin-bottom:5vw;background-color:var(--light-gray);.content { background-color: var(--dark-gray); color: var(--blue); height: 25vw; padding: 2vw; margin: 0 2vw; position: relative; h1 { font-size: 5vw; line-height: 5vw; font-weight: 700; color: var(--light-gray); margin: 0; .blue { color: var(--light-blue); } } .code { position: absolute; top: calc(100% - 2vw); left: 0; font-size: 1.3vw; letter-spacing: 0.25vw; width: 100%; contain: paint; span { width: 198vw; position: relative; color: var(--gray); animation: binaryAnimation 30s linear 0s infinite both; } } .grid { display: grid; margin: 2vw 1vw 0; grid-template-columns: 2fr 1fr; .left, .right { position: relative; display: flex; flex-direction: column; gap: 1vw; a { font-size: 1.2vw; font-family: inter, sans-serif; color: var(--light-gray); width: max-content; } } .left::before, .right::before { content: ""; position: absolute; top: 0; left: -1vw; width: 0.4vw; height: 4vw; background-color: var(--light-blue); } } } .content::before { content: ""; position: absolute; top: 2.5vw; left: auto; right: 2.5vw; height: 4vw; width: 4vw; background: url(/img/logo_blue.webp); background-size: contain; background-repeat: no-repeat; background-position: center; } .content::after { content: ""; position: absolute; top: calc(100% - 0.5px); left: 0; width: 100%; height: 3vw; clip-path: polygon(0 0, 50% 100%, 100% 0); background: var(--dark-gray); }}@media screen and (orientation:portrait) and (max-width:900px){#footer{margin-bottom:10vw;.content { height: 65vw; margin-top: 10vw; .grid { margin: 2vw 3vw 0; .left, .right { a { font-size: 3.2vw; line-height: 5.5vw; } } .left::before, .right::before { left: -3vw; width: 1vw; height: 11vw; } } .code { top: calc(100% - 4.5vw); font-size: 4.3vw; } } .content::after { height: 8vw; }}}#header{z-index:1;position:relative;span { display: inline-block; text-align: center; position: fixed; color: var(--light-gray); top: 1vw; left: auto; right: 2vw; z-index: 2; line-height: 2.8vw; background-color: var(--dark-gray); border: 2px solid var(--light-gray); } span:hover { background-color: var(--light-gray); color: var(--dark-gray); border-color: var(--dark-gray); } .background { position: fixed; top: 0; left: 0; width: 75%; height: 100%; background: rgb(0 0 0 / 40%); left: -100%; transition: all 0.2s; } .menu { position: fixed; top: 0; left: 100%; width: 25%; height: 100%; background-color: var(--light-gray); transition: all 0.2s; ul { list-style-type: none; font-family: inter, sans-serif; font-size: 1vw; line-height: 2vw; font-weight: bold; } li { position: relative; ul { display: none; } } li:has(.sub-menu input:checked) { ul { display: block; } } .sub-menu { position: absolute; top: 0; left: 6vw; height: 2vw; width: 1vw; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Iconoir by Luca Burgio - https://github.com/iconoir-icons/iconoir/blob/main/LICENSE --%3E%3Cg fill='%23232323' fill-rule='evenodd' stroke-width='1.5' clip-rule='evenodd'%3E%3Cpath d='M14.97 17.53a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-.53-1.28h-7a.75.75 0 0 0-.53 1.28z'/%3E%3Cpath d='M15.5 14.75a.75.75 0 0 0 .75-.75v-3a4.75 4.75 0 0 0-4.75-4.75h-7a.75.75 0 0 0 0 1.5h7A3.25 3.25 0 0 1 14.75 11v3c0 .414.336.75.75.75'/%3E%3C/g%3E%3C/svg%3E"); background-size: contain; background-position: center; background-repeat: no-repeat; input { display: none; } } a { color: var(--dark-gray); } .links { display: flex; flex-direction: column; gap: 1vw; padding: 1vw; height: -webkit-fill-available; background: var(--dark-gray); clip-path: polygon(0 0, calc(100% - 6vw) 0, 100% 2vw, 100% 100%, 0 100%); a { color: var(--light-gray); font-family: inter; font-size: 1vw; padding-left: 2vw; position: relative; } a::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2vw; background-size: contain; background-position: center; background-repeat: no-repeat; } a:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Material Design Light by Pictogrammers - https://github.com/Templarian/MaterialDesignLight/blob/master/LICENSE.md --%3E%3Cpath fill='%23ebeff3' d='M19.5 22a1.5 1.5 0 0 0 1.5-1.5V17a1.5 1.5 0 0 0-1.5-1.5c-1.17 0-2.32-.18-3.42-.55a1.51 1.51 0 0 0-1.52.37l-1.44 1.44a14.77 14.77 0 0 1-5.89-5.89l1.43-1.43c.41-.39.56-.97.38-1.53c-.36-1.09-.54-2.24-.54-3.41A1.5 1.5 0 0 0 7 3H3.5A1.5 1.5 0 0 0 2 4.5C2 14.15 9.85 22 19.5 22M3.5 4H7a.5.5 0 0 1 .5.5c0 1.28.2 2.53.59 3.72c.05.14.04.34-.12.5L6 10.68c1.65 3.23 4.07 5.65 7.31 7.32l1.95-1.97c.14-.14.33-.18.51-.13c1.2.4 2.45.6 3.73.6a.5.5 0 0 1 .5.5v3.5a.5.5 0 0 1-.5.5C10.4 21 3 13.6 3 4.5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E"); } a:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Material Design Light by Pictogrammers - https://github.com/Templarian/MaterialDesignLight/blob/master/LICENSE.md --%3E%3Cpath fill='%23ebeff3' d='M5 5h13a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3m0 1c-.5 0-.94.17-1.28.47l7.78 5.03l7.78-5.03C18.94 6.17 18.5 6 18 6zm6.5 6.71L3.13 7.28C3.05 7.5 3 7.75 3 8v9a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2V8c0-.25-.05-.5-.13-.72z'/%3E%3C/svg%3E"); } img { width: 10vw; align-self: center; } } }}#header:has(#menu:checked){.background { left: 0; } .menu { left: 75%; }}@media screen and (orientation:portrait) and (max-width:900px){#header{height:0;label[for="menu"]:not(.background) { display: inline-block; height: 0; } .background { width: 20%; } span { position: absolute; top: 19vw; right: 0vw; line-height: 12vw; font-size: 4vw; height: 12vw; padding-right: 3vw; padding-left: 13vw; width: max-content; border-radius: 0; border: 0; mask-image: linear-gradient(40deg, black 9.5vw, white 9.7vw); mask-mode: luminance; } span.fixed { position: fixed; top: 0; } span:hover { background-color: var(--dark-gray); color: var(--light-gray); } .menu { width: 80%; ul { font-size: 6vw; line-height: 12vw; ul { font-size: 4vw; line-height: 6vw; } } .sub-menu { top: 3vw; left: 35vw; height: 6vw; width: 7vw; } .links { gap: 5vw; padding: 5vw; a { font-size: 4vw; line-height: 6vw; padding-left: 5vw; } a::before { width: 4vw; } img { width: 30vw; } } }}#header:has(input:checked){.menu { left: 20%; } span { top: 0; }}}