@import url(general.css);

/* Navbar */

.navbar {
  display: flex;
  flex-direction: column;
  background-color: var(--color-neutral-200);
  padding: 1rem;
  border-bottom: 2px solid var(--color-accent);
}

.logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
 
.logo {
  max-width: 13rem; 
}


.navbar-hamburgerMenue {
  width: 2rem;
  height: 1.5rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: opacity .3s ease-in-out, transform .3s ease-in-out, transform-origin .3s ease-in-out;
}

.navbar-hamburgerMenue-balken{
    height: .15rem;
    background-color: var(--color-neutral-100);
    border-radius: 2px;
}

/* Wenn das Hamburger-Menue geöffnet ist */
.navbar-hamburgerMenue-balken-mitte.hamburgerMenue-open{
    opacity: 0;
}
.navbar-hamburgerMenue-balken-oben.hamburgerMenue-open{
    transform-origin: left top;
    transform: rotate(45deg)
}
.navbar-hamburgerMenue-balken-unten.hamburgerMenue-open{
    transform-origin: left bottom;
    transform: rotate(-45deg)
}

/* Die Navliste eingeklappt */
.navbar-list {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-out, padding 0.3s ease-out;
}

.navbar-list-collapsed-visible {
  /* Ist nötig, weil ansonsten das padding in die Gesamthöhe einbezogen wird. Diese wird aber dynamisch über scrollHeight in Js ausgelesen */
  box-sizing: content-box;
  padding: 1rem 0;
  height: var(--navbar-collapsed-navlist-height);
}


.navbar-listitem {
  position: relative;
}

.language{
    display: flex;
    gap: .3rem;
    align-items: center;
}

.flag{
    height: 1.2rem;
    width: auto;
}

.navbar-link::before {
    content: "";
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transition: all 0.3s;
  }

.navbar-link {
  color: var(--color-neutral-100);
  font-size: 1.2rem;
  font-weight: 400;
  transition: color .3s linear;
  position: relative;
} 

/* Navbar expanded */
@media (min-width: 62rem) {
  .navbar {
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem 2rem;
  }

  

  .navbar-hamburgerMenue {
    display: none;
  }
  .navbar-list {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    height: auto;
  }

  /* Animationen */

  .navbar-link:hover{
    color: var(--color-accent);
  }
  .navbar-link:hover::before {
    transform: scaleX(1);
  }
  
}

/* ***************************************************************************************** */
/* Hero-Section */
.hero-container {
    min-height: 100vh;
    background-image: radial-gradient(var(--overlay-pics), var(--overlay-pics)),
      url("../pics/hero-desk.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
  }

  .hero-heading {
    text-align: center;
    color: var(--color-neutral-100);
  }

  .hero-heading h1{
      margin-bottom: 1.5rem;
      letter-spacing: 2px;
  }

 .hero-first-headline{
    font-size: calc(2rem + 3vw);
 }

 .herosection-wrapper{
     flex-direction: column;
 }

 .hero-explanation{
     max-width: 50ch;
     margin: 0 auto 1rem  auto;
     text-align: left;
     font-family: var(--font-text);
 }

 @media (min-width: 62rem) {
    .herosection-wrapper{
        flex-direction: row;
    }

    .hero-first-headline{
        margin-bottom: 4rem;
     }
  }

  /**************************************************************************************************************************/
  /* Kontaktformular */

  .kontaktformular {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-300);
    border-radius: 2px;
    border: 2px solid var(--color-accent);
    text-align: center;
    padding: 2rem 1rem;
    max-width: 25rem;
    margin: 0 auto;
  }
  
  .textbox {
    display: block;
    width: 100%;
    height: 2rem;
    margin-bottom: 1rem;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--color-neutral-300);
    color: var(--color-neutral-300);
    letter-spacing: 1px;
    font-size: 1rem;
    font-family: var(--font-text);
  }
  
  .textbox::selection {
    background-color: var(--color-neutral-300);
    color: var(--color-neutral-100);
  }
  
  .textbox::placeholder {
    color: var(--color-neutral-300);
    letter-spacing: 1px;
    font-size: 1rem;
  }
  
  .textbox:focus {
    outline: none; 
  }
  
  .kontaktformular-Nachricht {
    height: 5rem;
    margin-bottom: 2rem;
    resize: none;
  }

  /* font-family wird offensichtlich nicht vererbt */
  .kontaktformular-Nachricht::placeholder{
      font-family: var(--font-text);
  }
  
  .einwilligung-wrapper {
    display: flex;
    gap: 1rem;
    align-items: center;
  }
  
  .chkbox {
    display: none;
    height: 100%;
    width: 100%;
  }
  
  .checkmark{
      height: 1.5rem;
      width: 1.5rem;
      border-radius: .4rem;
      /* background-color: white; */
      border: 2px solid var(--color-neutral-300);
      padding: .15rem;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .einwilligung-arrow{
      display: none;
  }
  
  .einwilligung-wrapper > .chkbox:checked ~ .checkmark > .einwilligung-arrow{
      display: inline;
  }
  
  .einwilligung-wrapper > .chkbox:checked ~ .checkmark {
      border: .1rem solid black;
  }
  
  .text-einwilligung {
    line-height: 1.3;
    text-align: left;
  }
  
  
  /* Wenn Angaben fehlen */
  .form-missing {
    border-bottom: 1px solid red;
  }
  .form-missing::placeholder {
    color: red;
  }
  
  /* Überschreibt den Autocomplete-Style von Webkit Browsern */
  
  input:-webkit-autofill,
  input:-webkit-autofill:hover, 
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus{
      -webkit-text-fill-color: var(--color-neutral-300);
      /* Background-Color wird über den Schatten gesetzt */
      -webkit-box-shadow: 0 0 0px 1000px var(--color-neutral-100) inset;
  }

   /* Telefon */
   .kontaktformular-telefon{
        margin-top: 2rem;
    }

    .kontaktformular-telefon>i{
        font-size: 1.5rem;
    }

    .kontaktformular-telefon>a{
        font-family: var(--font-text);
    }
  
  /* .fa-phone-rotary{
      margin-right: .5rem;
  } */

  /* Mediaqueries */
  @media (min-width: 36rem) {
      .kontaktformular
      {
        padding: 2rem;
      }
    }



/* ******************************************************************************************************************************************** */
/* Das Kartell */

.kartell-section{
    background-color: var(--color-neutral-300);
}


.kartellanten-enumeration{
    margin-bottom: 2rem;
    list-style-type: none;
}

.kartellanten-enumeration>li
{
    text-align: left;
    font-weight: 500;
}



/* ******************************************************************************************************************************************** */
/* Welche Fahrzeuge sind betroffen */

.betroffen-section{
    background-color: var(--color-neutral-200);
}

.betroffen-enumeration{
    margin-bottom: 2rem;
    list-style-type: none;
}

.betroffen-enumeration>li
{
    text-align: left;
    font-weight: 700;
    margin-bottom: .3rem;
}

/* ******************************************************************************************************************************************** */
/* Wie können Betroffene Schadensersatz erhalten */

.schadensersatz-section{
    background-color: var(--color-neutral-300);
}

/* ********************************************************************************************************************************************** */
/* Cards */

.cards-container{
    background-color: var(--color-neutral-200);
}

.vorteile-card-wrapper{
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.vorteile-card-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-basis: 100%;
    gap: 1.5rem;
    padding: 1.5rem 1rem;
    border-radius: 2rem;
    text-align: center;
    border: 1.5px solid var(--color-accent);
}

.vorteile-headline{
    margin-bottom: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

.vorteile-text{
    text-align: center;
}

.vorteile-item-container{
    padding: 1.5rem;
    background-color: var(--color-accent);
    border-radius: 1rem;
}

.vorteile-icon{
    font-size: 2rem;
    color: var(--color-neutral-100);
    
}

/* Große Bildschirme */
@media(min-width: 62rem){
    .vorteile-card-wrapper{
        flex-direction: row;
    }   
}


/* **************************************************************************************************************************************************** */
/* Über uns */
.about-container{
    background-image: radial-gradient(var(--overlay-pics-dark), var(--overlay-pics-dark)),
      url("../pics/about.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    color: var(--color-neutral-100);
    text-align: center;
}

.about-text-wrapper{
    max-width: 60ch;
    margin: 0 auto;
}

.about-link{
    text-decoration: underline;
}

/* ******************************************************************************************* */
/* FAQ */
.faq-container{
    background-color: var(--color-neutral-300);
}

/* Der Wrapper und alle Elemente */
.accordeon-wrapper{
    max-width: 75ch;
    margin: 1em auto;
    display: flex;
    flex-direction: column;
    gap: 1em;
    --transition-duration: .5s;
}


/* Das einzelne Akkordeon-Item */
.accordeon-item-wrapper{
    border: 2px solid var(--color-accent);
    border-radius: 2px;
}


/* Der Fragebereich */
.accordeon-question-wrapper{
    padding: 1em;
    display: flex;
    justify-content: space-between;
    gap: 1.5em;
    align-items: center;
    cursor: pointer;
    font-family: var(--font-text);
    font-size: 1.2rem;
    font-weight: 500;
}

/* Ber Bereich mit dem Toggle-Button */
.accordeon-toggleButton-wrapper{
    width: 1.5em;
    height: 1.5em;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    /* Wichtig: Sonst schrumpft der Toggle-Button bei sehr langen Fragen */
    flex-shrink: 0;
    transition: transform var(--transition-duration) ease-out;
}

/* Beide Balken */
.accordeon-toggleButton-horizontal-bar, .accordeon-toggleButton-vertical-bar{
    width: 100%;
    height: 2px;
    background-color: #228058;
}

/* Vertikaler Balken */
.accordeon-toggleButton-vertical-bar{
    transform: rotate(90deg);
    position: absolute;
    transition: opacity var(--transition-duration) ease-out;
}

/* Wenn aufgeklappt, dann dreht sich das Kreuz */
.accordeon-item-wrapper.active .accordeon-toggleButton-wrapper{
    transform: rotate(360deg);
}

/* ...und der vertikale Balken verschwindet */
.accordeon-item-wrapper.active .accordeon-toggleButton-vertical-bar{
    opacity: 0;
}

/* Der Antortbereich */
.accordeon-answer-panel{
    background-color: white;
    color: var(--color-neutral-300);
    padding-inline: 1rem;
    height: 0;
}

/* Ersetzt das vertikale padding */
.answer-panel-padding-block{
    height: 2rem;
}

/* *************************************************************************** */
/* Footer */
.Footer{
    background-color: var(--color-neutral-200);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    color: var(--color-neutral-100);
    text-align: center;
    align-items: center;
    line-height: 1.6;
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-top: 2px solid var(--color-accent);
}

.footer-links{
    display: flex;
    gap: 1rem;
}

.footer-links>a{
    color: var(--color-neutral-400);
    text-decoration: underline;
}

@media (min-width: 62rem) {
    .Footer{
        flex-direction: row;
        justify-content: space-between;
    }
    .Footer>*{
        flex-basis: 100%;
    }
    .footer-links{
        justify-content: flex-end;
    }
  }

/* ******************************************************************************************************************** */
/* Unterseiten */
.subpage{
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    text-align: center;
}

/* Impressum */
.impressum{
    background-color: var(--color-neutral-300);
}

/* Kontakterfolg */
.kontakterfolg{
    background-color: var(--color-neutral-300);
}

.kontakterfolg-haken {
    font-size: 9rem;
    color: var(--color-accent);
    margin-bottom: 3rem;
    text-align: center;
  }

/* Kontaktfehler */

.kontaktfehler{
    color: var(--color-neutral-100);
    background-color: var(--color-neutral-300);
}

.kontaktfehler-telefon>i{
    font-size: 2.5rem;
}
  .kontaktfehler-kreuz {
    font-size: 9rem;
    color: red;
    margin-bottom: 3rem;
    text-align: center;
  }

  /* Datenschutz */
  .datenschutzerklaerung{
      text-align: left;
      background-color: var(--color-neutral-300);
  }
  .datenschutzerklaerung ul{
    margin-bottom: 1rem;
}
  .datenschutzerklaerung li{
    margin-left: 1rem;
}
.datenschutzerklaerung h2{
    margin-top: 3rem;
}
.datenschutzerklaerung h3{
    margin-top: 2rem;
}

/* **************************************************************************************** */
/* Der grüne Kreis */
.green-circle{
    position: relative;
    z-index: 0;
}

.green-circle::before{
    position: absolute;
    content: "";
    border-radius: 50%;
    /* width: 200%; */
    height: 100%;
    aspect-ratio: 1/1;
    background-color: var(--color-accent);
    z-index: -1;
    transform: translate(-50%, -40%);
}

/* Die grüne Abgrenzungslinie */
.headline-seperator{
    display: flex;
    justify-content: center;
    padding-block: 1rem;
}

.headline-seperator>span{
    height: .15rem;
    width: 6rem;
    background-color: var(--color-accent);
    margin-top: -1rem;
}

@media (min-width: 62rem) {
    .headline-seperator>span{
        margin-top: -2rem;
    }
  }

  /* Grüne Schrift */
  .green-color{
      color: var(--color-accent);
  }


/* **************************************************************************************************** */
/* Der Introbildschirm */
.intro{
    position: fixed;
    top:0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 1;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    background-color: var(--color-neutral-300);
    z-index: 1000;
}

.intro-circle-container{
    width: 3rem;
    height: 3rem;
}

.intro-circle{
    background-color: var(--color-accent);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
}


/* ****************************************************************************************************************** */
/* Schriftarten */
/* nunito-300 - latin */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 300;
    src: local(''),
         url('../fonts/nunito-v23-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/nunito-v23-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* nunito-regular - latin */
  @font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('../fonts/nunito-v23-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/nunito-v23-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* nunito-500 - latin */
  @font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 500;
    src: local(''),
         url('../fonts/nunito-v23-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/nunito-v23-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* nunito-700 - latin */
  @font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    src: local(''),
         url('../fonts/nunito-v23-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/nunito-v23-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

 /* merriweather-regular - latin */
@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('../fonts/merriweather-v30-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/merriweather-v30-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* merriweather-700 - latin */
  @font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 700;
    src: local(''),
         url('../fonts/merriweather-v30-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/merriweather-v30-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }