/*  ##### HELPERS ##### */

/* #### HIDE elements #####*/
.visually-hidden {
  /* Remove the item from normal flow */
  position: absolute;
  /* Workaround for falsely pronounced, smushed text */
  white-space: nowrap;
  /* Set it to the smallest possible size (some screen readers ignore elements with zero height and width) */
  width: 1px;
  height: 1px;
  /* Hide overflowing content after resizing */
  overflow: hidden;
  /* Reset any property that may change the elements size */
  border: 0;
  padding: 0;
  /* Clipping defines what part of an element should be displayed. */
  /* Deprecated clip property for older browsers */
  clip: rect(0 0 0 0);
  /* clip-path for newer browsers. inset(50%) defines an inset rectangle that makes the content disappear.  */
  clip-path: inset(50%);
  /* It seems like at the moment nobody is quite sure why margin: -1px is there. On top of that it seems to cause issues (see: https://github.com/h5bp/html5-boilerplate/issues/1985). */
  margin: -1px;
}

/* aligning */
.aligned {
  padding: 0 0 0 2.5rem;
}

/* #### GENERAL styles ####*/
html {
  box-sizing: border-box;
  font-size: 62.5%;
}

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

body {
  font-size: 1.6rem;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
  main {
    flex: 1 0 auto;
  }
  footer {
    flex-shrink: 0; /* sticky footer responive*/
  }

ol,
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  display: inline;
}

img {
  display: block;
}

/* Font, Colors

p: „Von der Industrie- ... 21 pixel, Lato Bold, letter-spacing: 25
span: Sachverständige: 36 / 43 pixel, Courier Bold
Spruch: 36 pixel, Courier Bold
HL Leistungen: 45 pixel, Courier Bold
Anlassgerechte rechtssichere... 22 pixel, Courier Bold
von zeitgenössischer... 19,5 / 26 pixel, Lato Semibold, letter-spacing: 25
rosa: #ed8e9b
grün: #84c673
*/

/* Font-face */

@font-face {
  font-family: courierBold;
  font-weight: 900;
  src: url('/assets/fonts/courier-prime/CourierPrimeBold.ttf');
}

@font-face {
  font-family: latoBold;
  font-weight: 900;
  src: url('/assets/fonts/lato/Lato-Bold.ttf');
}

@font-face {
  font-family: latoSemibold;
  font-weight: 500;
  src: url('/assets/fonts/lato/Lato-Semibold.ttf');
}

@font-face {
  font-family: latoRegular;
  font-weight: 300;
  src: url('/assets/fonts/lato/Lato-Regular.ttf');
}

p, em, small, address, a {
  color: #fff; 
}

p.hero-content--txt {
  font-family: latoSemibold;
  font-size: 1.7rem;
  letter-spacing: 0.25rem;
  line-height: 1.3;
  margin: 0.5rem 0;
}
.hero-content--txt-work {
  font-family: courierBold;
  font-size: 2.9rem;
  line-height: 1.2;
  color: #fff;
  display: block;
  width: 100%;
}
blockquote {
  font-family: courierBold;
  font-size: 2.8rem;
  line-height: 1.4;
  color: #84c673;
  margin: 8rem 0;
  max-width: 79rem;
}
h2 {
  font-family: courierBold;
  font-size: 3.6rem;
  color: #ed8e9b;
  padding: 0;
  margin-bottom: 4rem;
}
.leistungen-txt-content {
  font-family: latoSemibold;
  font-size: 1.9rem;
  letter-spacing: 0.25rem;
  margin: 0;
}
.leistungen-txt-content > em {
  font-family: courierBold;
  font-size: 2.2rem;
  font-style: normal;
  letter-spacing: 0;
}

.leistungen-txt-content > span {
  visibility: hidden;
}

/* Footer font style */
p.footer-txt {
  font-family: latoRegular;
  font-size: 1.75rem;
  letter-spacing: 0.1rem;
  font-style: normal;
  text-align: center;
  margin: 0;
}
address {
  font-family: latoRegular;
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
  font-style: normal;
}
  address .email {
    font-family: latoBold;
    display: inline-block;
  }
  address .tel {
    display: inline-block;
    text-decoration: none; 
  }

small {
  font-family: latoRegular;
  font-size: 1.2rem;
  letter-spacing: 0.025rem;
  font-style: normal;
}

/* Header */
.hero-logo {
  position: absolute;
  z-index: 10;
  /* left: 2rem; */
  transform: translate(-5%);
  top: 2rem; 
  width: 30rem; 
  fill: #fff;
  transition: fill 0.2s ease-in-out;
}
  .hero-logo:hover {
    fill: rgba(255, 255, 255, 0.8);
  }


/* Hero section */
/* hero position relative */
.hero {
  background-image: url("../img/Background_small.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100vh;
  position: relative;
  /* width: 100vw; */
  display: flex;
  /* justify-content: center; */
  align-items: center;
  /* background-attachment: fixed; */
}
  .hero--box {
    max-width: 63.3rem;
    height: 100vh;
    overflow: hidden;
    background-color: rgba(132, 198, 115, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
    .hero--content-container {
      width: 100%;
      /* padding: 0 1rem; */
      margin: 0 0 10rem;
    }

/* Scroll Down button */
button {
  display: inline-block;
  background: transparent;
  border: none;
  color: #fff;
  width: 6rem;
  font-size: 1.4rem;
  position: absolute;
  bottom: 2rem;
  left: calc(50% - 3rem);
  text-align: center;
}
button svg {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  fill: #fff;
}

/* QUOTE */
.quote-container {
  margin: 8rem 0; 
  max-width: 75rem;
}

/* 
### Section LEISTUNGEN ###
*/
.leistungen {
  margin: 0 auto;
  max-width: 96rem;
}

li.leistungen {
  overflow: hidden;
}

.leistungen-container {
  max-width: 96rem; 
  margin: 0 auto; 
  align-items: center;
  display: flex;
  flex-direction: column;
}
  .leistungen-container > li {
    margin: 0 0 2.1rem 0;
    position: relative;
  }
 
  .leistungen > a > img,
  .leistungen > a > picture > img{
    width: 100%;
    height: auto;
  }

  /* dark mode taken off -> new html class
  .leistungen-content--container-dark {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.6); 
    color: #fff;
    width: 100%;
    height: 45%;
    padding: 1rem;
    transition: height 0.2s ease-in-out;
  }
   */

  .leistungen-content--container {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(237,	142,	155, 0.8); /* Black background with 0.7 opacity */
    color: #fff;
    width: 100%;
    /* height: 45%; */
    padding: 2rem 1.8rem;
    transition: height 0.2s ease-in-out;
    transform: translateY(calc(100% - 9rem));
    transition: transform 0.3s;
    pointer-events: none;
  }

  li.leistungen {
    transition: transform 0.2s;
  }

  li.leistungen.hover .leistungen-txt-content {
    font-size: 1.35rem;
  }

  li.leistungen.hover .leistungen-txt-content > em{
    font-size: 2rem;
  }

  .leistungen.hover .leistungen-content--container {
    transform: none;
  }

  .leistungen.hover .leistungen-txt-content > span {
    visibility: visible;
  }

  /*
  ### Section Leistungen ###
  ### Hover Styles ###
   */


/* FOOTER: Font, Color
grüner Footer: #84c673
Adresse + Von der Industrie...:
19,5 / 28 pixel, Lato Regular, letter-spacing: 25
Copyright: 14 pixel, Lato Regular, letter-spacing: 25
*/

footer {
  background-color: #84c673;
  margin-top: 10rem;
  padding: 5rem 1rem;
}
  .footer--inner-container{
    display: flex;
    flex-direction: column;
    max-width: 40rem;
    margin: 0 auto;
  }
    .footer--inner-container > div {
      margin: 0 auto 3rem auto;
      text-align: center; 
    }
    .logo {
      width: 7rem;
    }
    .footer--inner-container > div:last-child {
      margin-top: 2.5rem;
    }

    .footer-home-link {
      display: inline-block;
    }
    .footer-home-link:visited,
    .footer-home-link:link {
      text-decoration: none;
    }
    
    .footer-logo {
      width: 30rem;
      fill: #fff; 
      text-decoration: none;
      margin: 0 auto;
      transition: fill 0.2s ease-in-out;
    }
    .footer-logo:hover {
      fill: rgba(255, 255, 255, 0.8);
    }

/* 
Media-Queries
*/

@media (min-width: 480px) and (max-width: 960px) {
  .aligned {
    padding: 0 0 0 5rem;
  }
  .hero-logo {
    left: 7rem;
  }
  .hero{
    background-image: url("../img/Background_medium.png");
  }
    .hero--content-container {
      width: 90%;
    }
    .hero--box {
      max-width: 63.3rem;
    }
    p.hero-content--txt {
      font-size: 1.8rem;
      line-height: 1.4;
    }
    .hero-content--txt-work {
      font-size: 3.5rem;
    }

  .leistungen-container > li {
    margin: 0 2.1rem 2.1rem 0;
    position: relative;
  }
}

@media (min-width: 633px) {

  p.footer-txt {
    font-size: 1.95rem;
  }
  address {
    font-size: 1.95rem;

line-height: 1.4;

letter-spacing: 0.1rem;
  }
  small {
    font-size: 1.4rem;
  }
  .leistungen-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (min-width: 633px) and (max-width: 960px) {
  .wrapper,
  .leistungen {
    width: 63.3rem;
    max-width: 63.3rem;
    margin: 0 auto;
  }

  li.leistungen {
    width: auto;
  }

  blockquote {
    font-size: 3rem;
  }
  h2 {
    font-size: 4rem;
  }
  .hero--content-container {
    width: 80%;
  }

  .leistungen-container > li:nth-child(2n) {
    margin-right: 0;
  }
}

@media (min-width: 961px)  {
  /* HELPERS
  ## aligning text
  ## wrapper
   */

  .aligned {
    padding: 0 0 0 7rem;
  }

  .wrapper {
    max-width: 96rem;
    width: 96rem;
    margin: 0 auto;
  }

  /* general styles */

  .leistungen-container {
    justify-content: flex-start;
  }
  
  .leistungen-txt-content {
    font-size: 1.95rem;
    letter-spacing: 0.25px;
  }
  .leistungen-txt-content > em {
    font-size: 2.2rem;
    letter-spacing: 0.1px;
  }

  li.leistungen.hover {
    transform: scale(1.35);
    z-index: 1;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
  }
  
  blockquote {
    font-size: 3.6rem;
  }
  h2 {
    font-size: 4.5rem;
  }
  p.footer-txt {
    text-align: left; 
    font-size: 1.95rem;

line-height: 1.4;

letter-spacing: 0.07rem;
  }
  /* Hero */

  .hero {
    background-image: url("../img/Background_big.png");
  }
    .hero--content-container {
      width: 79%;
    }
    .hero--box {
      width: 63.3rem;
    }
      p.hero-content--txt {
        font-family: latoSemibold;
        font-size: 2.1rem;
        line-height: 1.3;
      }
      .hero-content--txt-work {
        font-family: courierBold;
        font-size: 3.6rem;
        color: #fff;
      }

  /* Section 
     Leistung 
  */
    .leistungen-container > li:nth-child(3n +2) {
      margin-right: 2.1rem; 
      margin-left: 2.1rem;
    }
  
  /* FOOTER */
  footer {
    padding: 5rem 0;
  }
  .footer--inner-container {
    flex-direction: row;
    max-width: 96rem;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
  }
    .footer-logo {
    width: 34rem;
    }
    .footer--inner-container > div {
      margin: 0;
      text-align: left;
    }
    .footer--inner-container > div:nth-child(1) {
      flex-basis: auto;
    }
    .footer--inner-container > div:nth-child(2) {
      margin-right: 6rem;
      flex-basis: 50.3%;    
      padding-left: 1rem;
    }
    .footer--inner-container > div:nth-child(3) {
      flex-basis: auto;
    }
    .smallprint-container {
      flex-basis: 100%;
      display: flex;
      justify-content: space-between;
      margin: 0;
      width: 100%;
    }
}

/* ### Helper: hero background image largest min-width 1440px### */
 @media (min-width: 1440px) {
  .hero {
    background-image: url("../img/sasa-hanten-schmidt_sitzend_2400px.jpg");
    background-position-x: center;
  }
} 


/* Quick fixes */

header {
  position: relative;
}