@import url('/layout/vvw/googlefonts/poppins/poppins.css');

* { margin:0px;padding:0px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; }

:root {
  --color-vvw:#2ea3f2;
  --color-vvw-rgb:46,163,242;
  --color-vvw-dark:#0E54A2;
  --color-vvw-dark-rgb:14, 84, 162;
  --color-font:#000000;
  --color-background:#ffffff;
  --font-primary:'Poppins', sans-serif;
  --transition-default:all 1s ease-in-out;
  --transition-faster:all 0.25s ease-in-out;
  --transition-slow:all 1.75s ease-in-out;
  --image-bg:url('/layout/vvw/images/andre-beer-6mgfgEx2WaM.jpg');
}

html, body { height:100%;font-family:var(--font-primary);font-size:18px;line-height:24px;color:var(--color-font);background:var(--color-background);scroll-behavior:smooth; }

.overlay { overflow: hidden !important; }

.clearboth { clear:both;height:0px;line-height:0px;font-size:0px; }
.loader { display:none;position:absolute;margin:-25px 0 0 -25px;top:50%;left:50%; }
a images { border:none; }

.wrapper-hasteaser { height: 100%;position:relative; }
.wrapper-hasteaser .container-teaser { height:66vh;width:100%;position:fixed;background:rgba(var(--color-vvw-rgb),1);box-shadow:0 0 20px 5px rgba(0,0,0,0); }
body.fixed .wrapper-hasteaser .container-teaser { height:86px;width:100%;position:fixed;z-index:99;background:rgba(255,255,255,1);border-bottom:10px solid var(--color-vvw);box-shadow:0 0 20px 5px rgba(0,0,0,0.2); }

.wrapper-hasteaser .container-teaser .wrapper { position:relative;background-image:var(--image-bg);background-size:cover;background-position:top 12% center;height:100%;opacity:1;-webkit-transition:var(--transition-faster);-moz-transition:var(--transition-faster);-ms-transition:var(--transition-faster);-o-transition:var(--transition-faster);transition:var(--transition-faster); }
body .wrapper-hasteaser .container-teaser .wrapper:after { content: "";display: block;position:absolute;height:35vh;width:100%;bottom:0px;left:0px;background:linear-gradient(0deg, rgba(0,0,0,.5), transparent);z-index:1; }
body.fixed .wrapper-hasteaser .container-teaser .wrapper { opacity:.2;background-image:inherit; }
body.fixed .wrapper-hasteaser .container-teaser .wrapper:after { background:inherit; }



.wrapper-hasteaser .container-teaser .wrapper .overlay { background-color:rgba(var(--color-vvw-rgb),1);height:100%;width:100%;display:grid;justify-items:center;align-items:center; }
.wrapper-hasteaser .container-teaser .wrapper .overlay.loaded { background-color:rgba(var(--color-vvw-rgb),0.0);height:100%;mix-blend-mode:multiply; }
.wrapper-hasteaser .container-teaser .wrapper .overlay .loading-animation { display:inline-block;width:80px;height:80px; }
.wrapper-hasteaser .container-teaser .wrapper .overlay .loading-animation:after { content: "";display:block;width:64px;height:64px;margin:8px;border-radius:50%;border:3px solid #ffffff;border-color:#ffffff transparent #ffffff transparent;animation:loading-animation 2s linear infinite;opacity:1; }
@keyframes loading-animation {
  0% { transform:rotate(0deg);opacity:1; }
  50% { opacity:.1; }
  100% { transform:rotate(360deg);opacity:1; }
}
.wrapper-hasteaser .container-teaser .wrapper .overlay.loaded .loading-animation { display:none; }

.teaser-logo { position:fixed;top:30px;left:50px;width:auto;margin:0 auto;z-index:9999;opacity:0;-webkit-transition:var(--transition-faster);-moz-transition:var(--transition-faster);-ms-transition:var(--transition-faster);-o-transition:var(--transition-faster);transition:var(--transition-faster); }
.teaser-logo.visible { opacity:1; }
.teaser-logo a { display:inline-block;width:100%;height:35px;text-decoration:none;color:#ffffff;font-family:var(--font-primary); }
.teaser-logo a span { display:inline-block;position:relative;color:#ffffff;font-size:48px;line-height:35px;letter-spacing:-10px;font-weight:700; }
.teaser-logo a span:nth-child(2n) { color:#bbbbbb; }
body.fixed .teaser-logo { top:20px; }
body.fixed .teaser-logo a span { color:#000000; }
body.fixed .teaser-logo a span:nth-child(2n) { color:#505050; }
body.fixed .teaser-logo a span:after { width:0px; }

.mobile { position:fixed;right:50px;top:30px;z-index:999;display:none;-webkit-transition:var(--transition-faster);-moz-transition:var(--transition-faster);-ms-transition:var(--transition-faster);-o-transition:var(--transition-faster);transition:var(--transition-faster); }
body.fixed .mobile {  }
.mobile a { display:block;cursor:pointer;width:40px;height:36px;position:relative;
  -webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);
  -webkit-transition:var(--transition-faster);-moz-transition:var(--transition-faster);-ms-transition:var(--transition-faster);-o-transition:var(--transition-faster);transition:var(--transition-faster); }
.mobile a span { display:block;position:absolute;height:4px;width:100%;background:#ffffff;opacity:1;left:0;border-radius:1px;
  -webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);
  -webkit-transition:var(--transition-faster);-moz-transition:var(--transition-faster);-ms-transition:var(--transition-faster);-o-transition:var(--transition-faster);transition:var(--transition-faster); }
.mobile a span:nth-child(1){ top:0px;
  -webkit-transform-origin:right center;-moz-transform-origin:right center;-o-transform-origin:right center;transform-origin:right center; }
.mobile a span:nth-child(2){ top:16px;width:80%;
  -webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center; }
.mobile a span:nth-child(3){ top:31px;
  -webkit-transform-origin:right center;-moz-transform-origin:right center;-o-transform-origin:right center;transform-origin:right center; }

body.nav-open .mobile a span:nth-child(1){ -webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);top:1px; }
body.nav-open .mobile a span:nth-child(3){ -webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);top:30px; }
body.nav-open .mobile a span:nth-child(2){ width:0px; }

.wrapper-hasteaser .wrapper-teaser-title { position:absolute;width:100%;height:calc(66vh - 94px);display:grid;align-items:center;background-size:cover;background-position:center;opacity:1;top:94px;-webkit-transition:var(--transition-default);-moz-transition:var(--transition-default);-ms-transition:var(--transition-default);-o-transition:var(--transition-default);transition:var(--transition-default); }
body.scrolled .wrapper-hasteaser .wrapper-teaser-title { opacity:0; }
.wrapper-hasteaser .wrapper-teaser-title .wrapper-title, .wrapper-hasteaser .wrapper-teaser-title .wrapper-title > div { /*display:table;width:auto;*/color:#ffffff; }
.wrapper-hasteaser .wrapper-teaser-title .wrapper-title { margin:0 auto;opacity:1;z-index:99; }
.wrapper-hasteaser .wrapper-teaser-title .wrapper-title .teaser-title { font-family:var(--font-primary);font-weight:200;font-size:40px;line-height:60px;text-align:center;margin:0;letter-spacing:0.01em;text-shadow:rgba(0,0,0, 0.8) 0px 0 25px; }
.wrapper-hasteaser .wrapper-teaser-title .wrapper-title span { display:block;font-weight:700; }

.container-navigation { min-height:94px;position:fixed;top:0;z-index:998;display:block;border-bottom:1px solid rgba(255, 255, 255, 0.3);width:100%; }
.container-navigation .wrapper { padding:0 50px;height:100%;font-weight:500;font-size:21px;line-height:16px; }
.container-navigation .wrapper ul { width:fit-content;list-style:none;margin:0 0 0 auto;font-family:var(--font-primary); }
.container-navigation .wrapper ul li { margin:40px 20px 40px 0;display:inline-block;line-height:16px;display:inline-block; }
.container-navigation .wrapper ul li, .container-navigation .wrapper ul li:hover { margin-bottom:0; }
.container-navigation .wrapper ul li.hover a, .container-navigation .wrapper ul li:hover a { border-bottom:1px solid #ffffff;padding-bottom:37px;display:inline-block;margin-bottom:-1px; }
.container-navigation .wrapper ul li:last-of-type { margin-right:0; }
.container-navigation .wrapper a { color:#ffffff;text-decoration:none;display:inline-block; }


body.fixed .container-navigation { border-bottom:inherit; }
body.fixed .container-navigation .wrapper a { color:#000000; }
body.fixed .container-navigation .wrapper ul li { margin:30px 20px 30px 0; }
body.fixed .container-navigation .wrapper ul li.hover { margin-bottom:0; }
body.fixed .container-navigation .wrapper ul li:last-of-type { margin-right:0; }
body.fixed .container-navigation .wrapper ul li.hover a, body.fixed .container-navigation .wrapper ul li:hover a { border-bottom:1px solid #000000;padding-bottom:29px; }


.main { position:relative;top:66vh;background:#ffffff;border-top:10px solid var(--color-vvw); }
.main .section { padding:50px 0; }

.main .section h2 { scroll-margin-top:135px; }
.main h1 { font-family:var(--font-primary);font-size:36px;line-height:36px;margin:0 0 30px 0;letter-spacing:0.01em;font-weight:400; }
.main h1 span { letter-spacing:-8px;font-weight:800; }
.main h1 span:nth-child(2n) { color:#505050; }
.main h1:after { content:"";display:block;margin:40px auto 40px auto;width:40px;height:3px;background:var(--color-vvw); }
.main h2 { font-family:var(--font-primary);font-size:34px;line-height:36px;margin:0 0 20px 0;letter-spacing:0.01em;font-weight:400; }
.main h3 { font-family:var(--font-primary);font-size:30px;line-height:35px;margin:0 0 15px 0;letter-spacing:0.01em;font-weight:300; }
.main h4 { font-family:var(--font-primary);font-size:24px;line-height:30px;margin:0 0 10px 0;letter-spacing:0.01em;font-weight:700; }

.main p { font-size:18px;line-height:26px;font-weight:300;margin:0 0 20px 0;letter-spacing:0.01em; }

.main ul { margin-left:20px;font-weight:300; }

.main .content a { display:inline-block;color:rgba(var(--color-vvw-rgb),1);text-decoration:none;border-bottom:2px solid rgba(var(--color-vvw-rgb), .4);padding:0 0 2px 0;-webkit-transition:var(--transition-faster);-moz-transition:var(--transition-faster);-ms-transition:var(--transition-faster);-o-transition:var(--transition-faster);transition:var(--transition-faster); }
.main .content a:hover { border-color:rgba(var(--color-vvw-rgb), .7); }

.main .section .text { text-align:left;margin-left:auto;margin-right:auto;width:70%; }
.main .section .text ul { margin:0 0 20px 25px; }
.main .section .text-center { text-align:center;margin-left:auto;margin-right:auto;width:70%; }

.main .section .text-center ul { text-align:left;margin:0 20px 20px 20px; }

.main .section .text-portrait { margin-left:auto;margin-right:auto;width:100%;display:grid;grid-template-columns:9fr 4fr;padding:0 150px;gap:50px; }
.main .section .text-portrait.full { padding:0;grid-template-columns:6fr 4fr; }
.main .section .text-portrait.left { grid-template-columns:4fr 9fr; }
.main .section .text-portrait.full.left { grid-template-columns:4fr 6fr; }
.main .section .text-portrait .text {  }
.main .section .text-portrait .text h1:after { margin:20px 0 20px 0; }
.main .section .text-portrait .text h2:after { margin:20px 0 20px 0; }
.main .section .text-portrait .portrait { background-size:contain;background-position:top;background-repeat:no-repeat; }
.main .section .text-portrait.full .portrait { margin:-150px 0;background-size:cover;background-position:center; }
.main .section .text-portrait.full .text { padding:0 0 0 150px; }
.main .section .text-portrait.full.left .text { padding:0 150px 0 0; }

.main .section .text-button { display:grid;grid-template-columns:repeat(2, 1fr);padding:0 150px;gap:50px; }
.main .section .text-button h4 { margin:0 0 40px 0; }
.main .section .text-button ul { margin-left:50px; }

.main .section .button { display:grid;align-content:end;justify-content:center; }
.main .section .button a { width:fit-content;padding:18px 40px;border-radius:30px;color:#ffffff;background-color:var(--color-vvw);text-decoration:none;font-weight:600;font-size:19px;line-height:19px; }
.main .section .mobile-links .button { margin-bottom:20px; }
.main .section .mobile-links .button:last-of-type { margin-bottom:0; }

.main .section .references { width:70%;display:grid;grid-template-columns:repeat(3, 1fr);margin:0 auto;gap:50px;grid-template-rows:1fr min-content; }
.main .section .references .reference { padding-bottom:50px;border-bottom:1px solid #000000;margin-bottom:50px; }
.main .section .references .reference:last-of-type { border-bottom:none; }
.main .section .references .reference .reference-image { margin-bottom:20px; }
.main .section .references .reference .reference-image img { width:100%; }
.main .section .references .reference .reference-data p { margin:0; }

.main .section.datenschutz h2 { scroll-margin-top:100px;text-align:left; }
.main .section.datenschutz h3 { scroll-margin-top:100px;text-align:left; }
.main .section.datenschutz h4 { font-weight:300;text-align:left; }
.main .section.datenschutz p { text-align:left; }
.main .section.datenschutz a { color:#000000;border-bottom: 2px solid rgba(0, 0, 0, .4);word-break:break-word; }


.main .section .locations { display:grid;grid-template-columns:repeat(1, 1fr);margin:50px 0 0 0; }
.main .section .locations .location a { border-bottom:none; }

.main .section.dark { background:var(--color-vvw);color:#ffffff; }
.main .section.dark h1:after { background:#ffffff; }
.main .section.dark h2:after { background:#ffffff; }
.main .section.dark a { color: #ffffff;border-bottom:2px solid rgba(255,255,255,.4); }
.main .section.dark a:hover { border-color:rgba(255,255,255,.7); }

.main .section.lightgrey { background:rgba(0,0,0,.1); }

.main .footer { width:100%;background:rgba(var(--color-vvw-rgb),1);z-index:1;color:#ffffff; }
.main .footer a { display:inline-block;color:#ffffff;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.4);padding:0 0 2px 0;-webkit-transition:var(--transition-faster);-moz-transition:var(--transition-faster);-ms-transition:var(--transition-faster);-o-transition:var(--transition-faster);transition:var(--transition-faster); }
.main .footer a:hover { border-color:rgba(255,255,255,.7) }
.main .footer > div { text-align:center;padding:50px; }
.main .footer .footer-info h3 { font-family:var(--font-primary);font-size:32px;line-height:42px;margin:0 0 20px 0;letter-spacing:0.01em;font-weight:600; }
.main .footer .footer-info p { margin:0 0 5px 0; }
.main .footer .footer-info p:last-of-type { margin:0; }
.main .footer .footer-info ul { margin:0;list-style-type:none;width:auto;text-align:center;font-size:21px;line-height:30px;font-weight:300;letter-spacing:0.01em; }
.main .footer .footer-info ul li { display:inline-block; }
.main .footer .footer-info ul li:after { content:" | "; }
.main .footer .footer-info ul li:last-of-type:after { content:""; }
.main .footer .footer-links { border-top:5px solid rgba(255,255,255,.4); }
.main .footer .footer-links ul { margin:0;list-style-type:none;width:auto;text-align:center; }
.main .footer .footer-links ul li { display:inline-block; }
.main .footer .footer-links ul li:after { content:" | "; }
.main .footer .footer-links ul li:last-of-type:after { content:""; }

/* Normal Screen */
@media only screen and (max-width: 1440px) {
  
}

@media only screen and (max-width: 1240px) {
	.main h1 { font-size:45px;line-height:56px; }
	.main p { font-size:19px;line-height:28px; }

	.main .section .text-portrait { padding:0 50px; }
  .main .section .text-portrait.full { padding:0 50px; }
	.main .section .text-portrait.full .portrait { margin:0; }
	.main .section .text-portrait.full .text { padding:inherit; }
	.main .section .text-portrait.full.left .text { padding:0 50px 0 0; }
}

/* Smaller Screen & Tablet Horizontal */
@media only screen and (max-width: 1166px) {
  .main .section .text-button { padding:0 100px; }
  .main .section .text-button .text { width:fit-content;margin-left:auto; }
} 

@media only screen and (max-width: 1024px) {
  
}

/* Tablet */
@media only screen and (max-width: 821px) {
  .main .section .text-center { width:85%; }

  .main .section .text-portrait { grid-template-columns:1fr; }
  .main .section .text-portrait.full { grid-template-columns:1fr; }
	.main .section .text-portrait.left { grid-template-columns:1fr; }
	.main .section .text-portrait.full.left { grid-template-columns:1fr; }
	.main .section .text-portrait .portrait { height:300px;grid-row:1;background-position:left; }
  .main .section .references { grid-template-columns:1fr; }
	.main .section .text-portrait .text { grid-row:2; }
}

@media only screen and (max-width: 795px) {  
  .wrapper-hasteaser .wrapper-title { width:80%;margin:0 auto; }
  .main .section .text { width:80%; }
  .main .section .text-center { width:80%; }
  .main .section .references { width:80%; }
  .main .section .text-button { grid-template-columns:1fr; }
  .main .section .references { gap:0; }
  .main .section .references .reference:last-of-type { border-bottom:1px solid #000000; }
  .main .section .references-grid:last-of-type .reference:last-of-type { border-bottom:none; }

  .main h1 { word-wrap:break-word; }
  .main h2 { word-wrap:break-word; }
  .main h3 { word-wrap:break-word; }
  .main h4 { word-wrap:break-word; }
  .main p { word-wrap:break-word; }
}

@media only screen and (max-width: 675px) {
  .mobile { display:block; }
  body.fixed .mobile  { top:19px; }
  body.fixed .mobile a span { background:#000000; }
  .container-navigation { border:inherit;border-top:1px solid rgba(255,255,255,0.3);margin-top:92px; }
  body.nav-open .container-navigation { background:rgba(var(--color-vvw-rgb),1); }
  .container-navigation .wrapper { padding:0;display:none; }
  .container-navigation .wrapper ul { width:100%;margin:0; }
  .container-navigation .wrapper ul li { width:100%;margin:0;display:block;text-align:center;padding:0; }
  .container-navigation .wrapper ul li.hover, .container-navigation .wrapper ul li:hover { background-color:rgba(255,255,255,0.3); }
  .container-navigation .wrapper ul li.hover a, .container-navigation .wrapper ul li:hover a { border:inherit;padding-bottom:20px;margin-bottom:0; }
  .container-navigation .wrapper a { display:block;padding:20px 0; }
  .wrapper-hasteaser .container-teaser .wrapper .overlay.loaded { background-color:inherit; }
  body.fixed .container-navigation { border-top:inherit;margin-top:85px; }
  body.fixed .container-navigation .wrapper ul li { padding:0;margin:0; }
  body.fixed .container-navigation .wrapper ul li.hover a, body.fixed .container-navigation .wrapper ul li:hover a { border-bottom:inherit;color:#ffffff;padding:20px 0; }
  body.fixed .container-navigation .wrapper a { color:#ffffff; }
  body.fixed .wrapper-hasteaser .container-teaser {  }
  body.fixed .wrapper-hasteaser .container-teaser .wrapper { opacity:1; }
  
}

@media only screen and (max-width: 575px) {  
  .wrapper-hasteaser .container-teaser { height:525px; }
  .wrapper-hasteaser .wrapper-teaser-title { height:525px;align-items:inherit;top:150px; }
  .main { position:relative;top:525px; }


  .container-navigation { left:0; }
  .container-navigation .wrapper ul { font-size:25px;line-height:25px; }
  .container-navigation .wrapper ul li { text-align:center; }

  .main h1::after  { margin:30px auto 30px auto; }
  .main ul li { word-break:break-word; }  
  .main .section { padding:30px 0; }
  .main .section .text-button { width:85%;margin:0 auto;padding:0; }
  .main .section .text-portrait { padding:0 30px; }
  .main .section .text-portrait.full { padding:0 30px; }
  .main .section .text-portrait.full .text { padding:0px; }

  .main .footer .footer-info ul li { display:block;margin-top:5px;margin-bottom:15px; }
  .main .footer .footer-info ul li:last-of-type { margin-bottom:0; }
  .main .footer .footer-info ul li:after { content:""; }
  .main .footer .footer-links ul li { display:block;margin-bottom:10px; }
  .main .footer .footer-links ul li:last-of-type { margin-bottom:0; }
  .main .footer .footer-links ul li:after { content:""; }
}        

/* SmartPhone */
@media only screen and (max-width: 480px) {   
  .main .section .text-center { margin:0;width:100%;padding:0 25px; } 
  .main .section .text-center p { word-wrap:break-word; }
  .main .section .button a { padding:15px 20px; }
  .main .section.datenschutz a { border-bottom:inherit;text-decoration:underline; }
}

/* Mobile */
@media only screen and (max-width: 425px) {
  
}