:root {
  --contentwidth: 46rem;
  --abstandgross: 6rem;
  --abstandmittel: 3rem;
  --abstandklein: 1.5rem;
  --hauptfarbe:#37aaa9; /* Türkis */
  --zweitfarbe: #003e56; /* Blau */
  --akzentfarbe: #27B4AA;
  --bgcolor: #fff;
}

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

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-v20-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-900 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/roboto-v20-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v20-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* ubuntu-regular - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ubuntu-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/ubuntu-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/ubuntu-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ubuntu-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */       
       url('../fonts/ubuntu-v15-latin-regular.svg#Ubuntu') format('svg'); /* Legacy iOS */
}
/* ubuntu-500 - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ubuntu-v15-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/ubuntu-v15-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ubuntu-v15-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/ubuntu-v15-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ubuntu-v15-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/ubuntu-v15-latin-500.svg#Ubuntu') format('svg'); /* Legacy iOS */
}


html {
  font-size: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  scroll-behavior: smooth;
}

body {
  background: var(--bgcolor);
  color: var(--zweitfarbe);
  font-family: 'Roboto';
}

main {
  max-width: 100vw;
  margin: 0 auto;
  padding: 0;
}

header {
  max-width: 100vw;
  padding: 2rem 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  min-height: 5vh;
  margin: 0 auto;
}

.pagetitle {
  font-family: 'Ubuntu';
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.8125rem;
}

.pagetitle a:hover {
  color: var(--akzentfarbe);
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  -o-transition: 0.3s ease;
}


ul.flex-menu {
  font-family: 'Ubuntu';
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

.flex-menu a:hover {
  color: var(--akzentfarbe);
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  -o-transition: 0.3s ease;
}

.flex-menu > * {
  padding-right: 1rem;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 30% 30% 1fr;
    grid-row-gap: 2rem;
    grid-column-gap: 6rem;
}

.width-5-5 {
  grid-column: 1 / 5;
}

.width-4-5 {
  grid-column: 2 / 5;
}

.width-3-5 {
  grid-column: 1 / 3;
}

.width-3-5-right {
  grid-column: 3 / 5;
}


.width-2-5 {
  grid-column: 2 / 4;
}

.width-1-5-left {
  grid-column: 2 / 3;
}

.width-1-5-right {
  grid-column: 3 / 4;
}

.structured-grid-item:nth-child(even) {
  grid-column: 2 / 3;
}

.structured-grid-item:nth-child(odd) {
  grid-column: 3 / 4;
}

.headline {
  margin: var(--abstandgross) 0 var(--abstandmittel) 0;
}

.headline::before {
  content: "";
  width: 200px;
  height: 3px;
  background-color: var(--akzentfarbe);
  left: 0;
  position: relative;
  display: block;
  top: 0;
  margin-bottom: var(--abstandmittel);
}

.video {
  width: 99%;
  height: auto;
  margin-top: var(--abstandgross);
  overflow: hidden;
  border-left: 15px solid var(--akzentfarbe)
}

h1,
h2,
h3,
h4 {
  font-family: 'Ubuntu';
  font-weight: 500;
}

p {
  font-family: 'Roboto';
  font-weight: 400;
}

h1 {
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 400;
  color: var(--hauptfarbe);
  margin-bottom: var(--abstandklein);
}

h2,
h3,
.h3 {
  font-size: 1.75rem;
  line-height: 2.563rem;
  
}  

a {
  text-decoration: none;
  color: inherit;
}

p a,
span a {
  text-decoration: underline;
}

p a:hover,
span a:hover {
        -webkit-text-decoration-color: var(--akzentfarbe);
        text-decoration-color: var(--akzentfarbe);
        transition: 0.3s ease ;
        -webkit-transition: 0.3s ease ;
        -moz-transition: 0.3s ease ;
        -ms-transition: 0.3s ease ;
        -o-transition: 0.3s ease ;
}

p {
  font-size: 1.25rem;
  line-height: 1.8125rem;
  font-weight: 500;
 
  margin-bottom: var(--abstandklein);
}

strong, bold, b {
  font-weight: 700;
}

em {
  font-style: italic;
}


ul,
ol {
  padding: 0 4rem;
  margin-bottom: var(--abstandgross);
}

li {
  font-size: 1.25rem;
  line-height: 29px;
}


#kontakt h4 {
  text-align: center;
}

.kontakt {
  max-width: 23rem;
  margin: 0 auto;
}


footer {
  margin: calc(var(--abstandgross) * 3) 0;
}

footer a:hover,
.footer a:hover {
  text-decoration: underline;
}

.has-border-right {
  border-right: 15px solid var(--akzentfarbe);
}

.cta {
  margin: var(--abstandmittel) 0;
  padding: 16px 32px;
  border: 1px solid var(--zweitfarbe);
  display: inline-block;
}

.cta:hover {
  background: var(--akzentfarbe);
  border: 1px solid var(--akzentfarbe);
  color: var(--bgcolor);
  transition: 0.3s ease ;
  -webkit-transition: 0.3s ease ;
  -moz-transition: 0.3s ease ;
  -ms-transition: 0.3s ease ;
  -o-transition: 0.3s ease ;
}

.cta a {
  text-decoration: none;
}

/************* Media Queries *************/

@media only screen and (min-width: 2600px) {
  main,
  header {
    max-width: 2600px;
  }
}

@media only screen and (min-width: 960px) {
  .mobil {
    display: none;
  }
}

@media only screen and (min-width:800px) and (max-width:959px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr 37.5% 37.5% 30rem 1fr;
  }

  .width-5-5 {
    grid-column: 2 / 4;
  }

  .width-3-5 {
    grid-column: 2 / 3;
  }

  .width-3-5-right {
    grid-column: 3 / 4;
  }

  .desktop {
    display: none;
  }

}

@media only screen and (max-width:799px) {
  main {
    padding: 0 1rem;
  }

  .grid {
    display: block;
  }

  .desktop {
    display: none;
  }

  footer {
    margin: var(--abstandgross) 0;
  }

  footer p {
    line-height: 200%;
  }
}

@media only screen and (max-width: 499px) {
  header {
    display: block;
  }

  .pagetitle::after {
  content: "";
  width: 200px;
  height: 3px;
  background-color: var(--akzentfarbe);
  left: 0;
  position: relative;
  display: block;
  top: 10px;
  margin-bottom: var(--abstandklein);
  }
  
  ul.flex-menu {
    display: block;
  }

}

/************* BackToTop Button *************/
#top_btn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
  background-color: var(--bgcolor);
}

#top_btn:hover {
  transform: scale(1.25);
}

/************* Bild-Slider *************/

.slideshow-container {
  /*max-width: 1000px;*/
  position: relative;
  margin: auto;
}

.slides {
  display: none;
 box-shadow: -15px 0px 0px 0px var(--akzentfarbe);
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: #f1f1f1;
  color: var(--akzentfarbe);
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: var(--akzentfarbe);
}