main {
	padding-top: 48px; // Headerhöhe
}
.start-hero {
  width: 100vw;
  min-width: 100%;
  height: calc(100vw * (9/16));
  padding: 0;
  background: transparent url("../img/hero-1-xsmall.jpg") center center no-repeat;
  background-size: cover;
  	.start-hero-txt {
		margin-top: calc(100vw * (9/16) * .65);
		h1 {
			line-height: 1;
		}
  	}
  	.grid {
  		height: 100%;
  	}
  	.start-hero-txt-p {
  		margin-top: 3rem;
  		width: span(9);
      position: relative;
      z-index: 10;
  	}
  	.start-hero-txt-head {
  		position: relative;
  		&::before {
  			content: "";
  			display: block;
  			position: absolute;
  			top: 0;
  			left: -15vw;
  			height: 100%;
  			width: calc(15vw - 2rem);
  			background-color: $orange;
  		}
  	}
}
.txt-head h2, .txt-head h1 {
  line-height: 1;
}
.start-hero.legal-head {
  background: transparent url("../img/hero-7-xsmall.jpg") center center no-repeat;
  background-size: cover;
  width: 100vw;
  min-width: 100%;
  height: calc(100vw * (1/3));
}
.start-hero.unternehmen-head {
  background: transparent url("../img/hero-8-xsmall.jpg") center center no-repeat;
  background-size: cover;
  width: 100vw;
  min-width: 100%;
  height: calc(100vw * (3/4));
  padding: 0;
}

body.kontakt footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
body.kontakt .start-hero {
height: calc(100vh - 4rem);
}

.start-hero.kontakt-head {
  background: transparent url("../img/hero-4-large.jpg") center center no-repeat;
  background-size: cover;
  width: 100vw;
  height: calc(100vh - (96px));
  // text-shadow: 1px 1px 1px #000;
}
.start-hero.kontakt-head .start-hero-txt {
  margin-top: 6%;
  width: 30%;
}
.start-hero.kontakt-head .start-hero-txt-p {
  width: 100%;
}
.start-hero.kontakt-head a { color: white; text-decoration: underline; }
.start-hero.legal-head .start-hero-txt {
  margin-top: calc(100vw * (1/3) * .65);
}
.start-hero.unternehmen-head .start-hero-txt {
    margin-top: inherit;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
.txt-head  {
  display: flex;
    h1 {
      width: span(2)
    }
    h2 {
      margin-left: gutter(24);
    }
}
.row {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  .gallery-btn {
    a {
      border: 1px solid white;
      color: white;
      padding: 16px 32px 16px 84px;
      position: relative;
      display: inline-block;
      text-decoration: none;
      background: transparent;
      transition: all ease .3s;
        &:hover {
            background: $orange;
            color: white;
            border: 1px solid $orange;
          }
    }
  }
  .link-box {
    width: span(5);
      img {
        display: block;
        width: 100%;
        height: auto;
      }
  }
}
.pic-txt {
  margin-top: gutter(24);
  display: flex;
  align-items: center;
    .pic {
      width: span(2);
      border-right: 20px solid $orange;
    }
    .txt {
      width: span(8);
    }
    .pic + .txt {
      margin-left: gutter(24);
    }
    .txt + .pic {
      margin-left: gutter(24);
      border-left: 20px solid $orange;
      border-right: 0;
    }
}
.pic-txt.right {
  justify-content: flex-end;
  text-align: right;
}
.footer-hero {
  width: 100vw;
  min-width: 100%;
  // height: calc(100vw * (9/16));
  height: auto;
  padding: 0;
  background: transparent url("../img/hero-6-xsmall.jpg") center center no-repeat;
  background-size: cover;
  	.footer-hero-txt {
  		color: #fff;
      padding-bottom: 50px;
		  margin-top: 50px;
		h1 {
			line-height: 1;
		}
  	}
  	.grid {
  		height: 100%;
  	}
  	.footer-hero-txt-p {
  		margin-top: 3rem;
  		width: span(12);
  	}
  	.footer-hero-txt-head {
  		position: relative;
  		&::before {
  			content: "";
  			display: block;
  			position: absolute;
  			top: 0;
  			right: calc(100% + 2rem);
  			height: 100%;
  			width: span(12);
  			background-color: $orange;
  		}
  	}
}
.full-width-img {
  padding: 0;
  width: 100vw;
  min-width: 100%;
  height: calc(100vw * (9/16));
    img {
      width: 100%;
      height: auto;
    }
}
.right-txt {
    position: relative;
    z-index:10;
    width: span(5);
    margin-left: span(7 wide);
    padding-left: 2rem;
    border-left: 1.5rem solid $orange;
    text-shadow: 1px 1px 1px $grey;
    p {
    	margin: 0;
    }
}
.left-txt {
	position: relative;
      z-index:10;
    width: span(5);
    margin-left: 0;
    padding-left: 2rem;
    border-left: 1.5rem solid $orange;
    text-shadow: 1px 1px 1px $grey;
    p {
    	margin: 0;
    }
}
.left-txt-v2, .right-txt-v2 {
  width: span(6);
}
.legal .left-txt {
	width: span(12);
  p {
    margin: 0 0 8px 0;
  }
}
.pic-txt-1 {
	position: relative;
	&::before {
		content: "";
		display: block;
		position: absolute;
    background: transparent center center no-repeat;
		background-size: contain;
		top: -12rem; 
		left: 0;
		width: 70vw;
		height: calc(70vw * (3/4));
		pointer-events:none;
    z-index: 1;
	}
}
.no-js .pic-txt-1::before, .no-webp .pic-txt-1::before {
  background-image: url("../img/Outstar48-1.png");
}
.webp .pic-txt-1::before {
  background-image: url("../img/Outstar48-1.webp");
}
.pic-txt-2  {
	position: relative;
	&::before {
		content: "";
		display: block;
		position: absolute;
		background: transparent center center no-repeat;
		background-size: contain;
		bottom: 12rem; 
		right: 2vw;
		width: 75vw;
		height: calc(75vw * (1/1));
		pointer-events:none;
	}
}
.no-js .pic-txt-2::before, .no-webp .pic-txt-2::before {
  background-image: url("../img/Outstar48-2.png");
}
.webp .pic-txt-2::before {
  background-image: url("../img/Outstar48-2.webp");
}
.pic-txt-3 {
	position: relative;
	&::before {
		content: "";
		display: block;
		position: absolute;
		background: transparent center center no-repeat;
		background-size: contain;
		top: -20%; 
		right: 5vw;
		width: 90vw;
		height: calc(90vw * (3/4));
		pointer-events:none;
	}
}
.no-js .pic-txt-3::before, .no-webp .pic-txt-3::before {
  background-image: url("../img/Outstar48-3.png");
}
.webp .pic-txt-3::before {
  background-image: url("../img/Outstar48-3.webp");
}
.pic-txt-4, .pic-txt-5 {
	position: relative;
	&::before {
		content: "";
		display: block;
		position: absolute;
		background: transparent center center no-repeat;
		background-size: contain;
		top: -50%; 
		left: 0;
		width: 80vw;
		height: calc(80vw * (9/16));
		pointer-events:none;
	}
}
.pic-txt-5 {
  &::before {
    top: -150%; 
    left: inherit;
    right: 0;
    width: 80vw;
    height: calc(80vw * (9/16));
    pointer-events:none;
  }
}
.no-js .pic-txt-5::before, .no-webp .pic-txt-5::before {
  background-image: url("../img/Outstar48-5.png");
}
.webp .pic-txt-5::before {
  background-image: url("../img/Outstar48-5.webp");
}
.no-js .pic-txt-4::before, .no-webp .pic-txt-4::before {
  background-image: url("../img/Outstar48-4.png");
}
.webp .pic-txt-4::before {
  background-image: url("../img/Outstar48-4.webp");
}
.white-popup {
  position: relative;
  background: #FFF;
  padding: 16px;
  max-width: 39vw;
  margin: 0 auto;
}
p.spec-btn,
p.print-btn,
p.brochure-btn {
  margin-top: 40px;
    a {
      border: 1px solid white;
      color: white;
      padding: 16px 32px 16px 84px;
      position: relative;
      display: inline-block;
      text-decoration: none;
      background: transparent;
      transition: all ease .3s;
        &:hover {
            background: $orange;
            color: white;
            border: 1px solid $orange;
          }
    }
}
#menu li.menu-btn {
    padding: 0;
    line-height: 1.75;
}
#menu p.spec-btn,
#menu p.print-btn,
#menu p.brochure-btn {
  margin-top: 20px;
  a {
    padding: 8px 24px 8px 64px;
    display: block;
    color: #fff;
  }
}
// Galerie Seite
body.galerie {
  height: calc(100vh - 4rem);
  background: #387f8e url("../img/hero-1.jpg") center center no-repeat;
  background-size: cover;
    h2 {
      color: white;
      background-color: $orange;
      padding: 0.5rem 1rem;
      margin-bottom: 16px;
      position: relative;
      line-height: 1;
      text-align: center;
    }
    h2:lang(fr) {
      font-size: 1.8rem;
    }
    h2 span { 
      position: absolute;
      right: 1rem;
      bottom:0.6rem;
      font-size: 14px;
    }
    h3 {
      margin: 2rem 0 1rem 0;
    }
    p {
      color: #666;
    }
    footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }
    .white-popup {
      margin-top: 5vh;
      a.simple-ajax, a.simple-img, a.simple-video {
        position: relative;
        display: block;
        &::after {
          content: "";
          display: block;
          position: absolute;
          right: 0;
          bottom: 0;
          width: 96px;
          height: 96px;
          // border: 1px solid #fff;
          background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2264%22%20height%3D%2264%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M27.063%2035.973V23.614c0-1.247.953-2.266%202.117-2.266s2.117%201.02%202.117%202.266v8.035M28.698%2043.596l-5.6-5.599c-1.175-1.176-1.463-2.811-.64-3.634.823-.822%202.196-.797%203.051.057l1.554%201.553M31.298%2032.08v-2.298c0-1.247.953-2.266%202.117-2.266s2.117%201.02%202.117%202.266v2.298M35.532%2032.08v-1.967c0-1.082.952-1.967%202.116-1.967s2.116.885%202.116%201.967v1.967M39.765%2032.08v-1.684c0-.926.953-1.684%202.117-1.684s2.117%201.02%202.117%202.266v5.95%22/%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M43.999%2036.494v4.076a3.03%203.03%200%200%201-3.021%203.021H28.701%22/%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%3E%3Cpath%20d%3D%22M31.298%2022.765h7.062M36.001%2020.404l2.359%202.361-2.359%202.36%22/%3E%3C/g%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%3E%3Cpath%20d%3D%22M27.063%2022.765h-7.062M22.36%2020.404l-2.359%202.361%202.359%202.36%22/%3E%3C/g%3E%3C/svg%3E');
          background-repeat: no-repeat;
          // background-color: rgba(255,255,255,.5);
          background-size: 96px 96px;
          background-position: center center;
        }
      }
      a.simple-img::after {
          background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2264%22%20height%3D%2264%22%3E%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20cx%3D%2230.662%22%20cy%3D%2230.658%22%20r%3D%229.818%22/%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M38.809%2036.137l4.933%204.937a1.564%201.564%200%200%201%200%202.205l-.458.457a1.564%201.564%200%200%201-2.205%200l-4.932-4.932%22/%3E%3Cg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%3E%3Cpath%20d%3D%22M30.662%2026.238l.001%208.839M26.246%2030.658h8.836%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
        }
      a.simple-video::after {
          background-image: url("data:image/svg+xml,%3Csvg id='Ebene_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cstyle%3E.st0%7Bfill:none;stroke:%23fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10%7D%3C/style%3E%3Cpath class='st0' d='M39.4 43.6H24.6c-3.4 0-6.1-2.7-6.1-6.1v-9.1c0-3.4 2.7-6.1 6.1-6.1h14.8c3.4 0 6.1 2.7 6.1 6.1v9.1c-.1 3.3-2.8 6.1-6.1 6.1z'/%3E%3Cpath class='st0' d='M36 32.9l-6 4.5v-9z'/%3E%3C/svg%3E");
        }
    }
}
.mfp-content {
    iframe {
      width: 80vw;
      height: 80vh;
      margin:auto 0;
    }
}

.orangeborder {
  border: 1px solid $orange;
}


.btn a {
  display: inline-block;
  border: 1px solid white;
  padding: 8px 50px;
  text-decoration: none !important;
  text-shadow: none;
  margin-top: 16px;
  background: transparent;
  border: 1px solid white;
  &:hover {
    background: $orange;
    border: 1px solid $orange;
  }
}

// Contactform
.contact-form {
  width: 100%;
  margin-top: 5rem;
  input[type=text],input[type=email],textarea {
    width: 100%;
    display: block;
    margin:  0 0 10px 0;
    border: 1px solid $orange;
    border-radius: 0;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.75);
    color: $orange;
    outline: none;
    &:focus {
      background-color: rgba(255, 255, 255, 0.91);
    }
  }
  input[type=checkbox] {
    margin-right: 8px;

  }
  input[type=submit] {
  background-color: rgba(255, 78, 0, 0.8);
  border: 1px solid $orange;
  color: white; 
  font-weight: normal;
  outline: none;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  margin:  10px 0 0 0;
  // vertical-align: bottom;
  &:hover {
    background-color: $orange;
  }
  }


::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: $orange;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: $orange;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: $orange;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: $orange;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color: $orange;
}

::placeholder { /* Most modern browsers support this now. */
   color: $orange;
}



}