@charset "utf-8";

/* zu Testzwecken */
@font-face {
font-family:'Mattregular';
font-style:normal;
font-weight:400;
src: local('Mattregular'), url('../fonts/Mattregular.otf') format('opentype');
}

@font-face {
font-family:'Anaheim';
font-style:normal;
font-weight:400;
src: local('Anaheim'), url('../fonts/Anaheim-Regular.ttf') format('truetype');
}

@font-face {
font-family: 'Assistant';
font-style: normal;
font-weight: 700;
src: local('Assistant'), url('../fonts/Assistant-ExtraBold.ttf') format('truetype');
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }

html{
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}

html {
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
}

:root { --blau:#6c00d9; --hellgrau:#fafafa; --schwarz:#111; --weiss:#fff;  --dunkelgruen:#188db3;  --hellgruen:#48ce75; --dunkelgrau:#666; --rot:#e21d8e; }

body { font-family:'Mattregular'; font-size:17px; color:var(--schwarz); }

a:link {color:var(--blau); text-decoration:none;}
a:active, a:visited {color:var(--blau); }

h1 { font-family:'Assistant',sans-serif; font-size:20px; margin:30px 15px; color:var(--dunkelgrau);}
h2 { font-family:'Assistant',sans-serif; font-size:29px; margin:0 0 20px 0;  color:var(--hellgruen); }
h3 { font-family:'Assistant',sans-serif; font-size:17px; margin:0 0 20px 0;  color:var(--blau); }
/* zu Testzwecken */ 
h4 { font-family:'Assistant',sans-serif; font-size:17px; margin:0;  color:var(--blau); }
h5 { font-family:'Mattregular',sans-serif; font-size:20px; color:var(--schwarz); letter-spacing:2px; } 

.icon-bar {
  display: flex;
  align-items: center;
    content: "";
  position: relative;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background-color: black;
}

.icon {
  position: relative;
  padding-right: 15px; 
}

.icon:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 80%;
  background-color: black;
}

.icon:last-child {
  padding-right: 15px;
    padding-left: 15px;
}

.icon:last-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 80%;
  background-color: black;
}

.icon:first-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 80%;
  background-color: black;
}

.videocontainer {
width: 100%;
overflow:hidden;
display:block;
height: 300px;
position:relative;
top:0;
left:0;
z-index:1;
}

.header { position:relative; width:100%; margin:0px auto; }

.container { position:relative; width:1440px; margin:0px auto;  }

.col1-4 { width:300px; height:400px; margin:30px; padding: 20px; border:1px solid #ddd; border-radius:14px;}

.col2-4 { width:600px; height:400px; margin:30px; background:var(--hellgrau); }

.col4-4 { width:660px; height:660px; margin:30px; background:var(--hellgrau); }

.col1-4-hoch { width:300px; height:600px; float:left; margin:30px; background:var(--hellgrau); }
.col1-4-halb { width:300px; height:150px; float:left; margin:30px; background:var(--hellgrau); }

.top, .end { margin:80px auto;  width:1380px; height:50px; background:var(--hellgrau); }
.end { background:var(--weiss); }

.col1-4.auto, .col2-4.auto {height:auto; }

.slogan { font-family:'Assistant',sans-serif; text-align:center; margin:0px auto; }
.logo { float:right;  margin-top:-30px; z-index:10;}
.centered { text-align:center; }
.all-centered { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); color:var(--dunkelgrau); }

button, .btn {position:absolute; bottom:20px; left:20px; background:var(--hellgruen); font-size: 15px; padding:8px 12px; text-align:center; min-width: 100px; color:var(--weiss) !important; border:none; border-radius:5px; cursor:pointer;}

address { font-style:normal; }
.umbruch { hyphens:auto; -moz-hyphens:auto; -o-hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; }

.transitions-enabled {
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-ms-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;

-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;

-webkit-transition-property: left, right, top;
-moz-transition-property: left, right, top;
-ms-transition-property: left, right, top;
-o-transition-property: left, right, top;
transition-property: left, right, top;
}



@media only screen and (max-width: 1548px) {
.end, .container { width:720px; }
h1 { letter-spacing:5px; font-size:26px; }
}

@media only screen and (max-width: 767px) {
.end, .container { width:400px; }
.col1-4, .col2-4 { margin-left:10px; width:380px; }
h1 { letter-spacing:3px; font-size:22px; }
}