:root {
  --bg-color: white;
  --bg-lightgrey: #c0c0c0;
  --bg-grey: #878585;
  --color-primary: #f2a100;
  --color-secondary: rgb(209, 81, 21);
  --color-tertiary: rgba(54, 129, 254, .7);
  --max-width: 1200px;
  --header-height: 6rem;
  --form-field-width: 85vw;
  --form-field-max-width: 380px;
  --slider-width:300px;
  --slider-width2:300px;
  --slider-width3:300px;
  --slider-height:375px;
  --slider-start:300px;
  --slider-end:-300px;
}
@media screen and (min-width: 360px) {
  :root {
    --slider-width:340px;
    --slider-width2:340px;
    --slider-width3:340px;
    --slider-height:425px;
    --slider-start:340px;
    --slider-end:-340px;
    }
}
@media screen and (min-width: 560px) {
  :root {
    --slider-width:496px;
    --slider-width2:496px;
    --slider-width3:496px;
    --slider-height:620px;
    --slider-start:496px;
    --slider-end:-496px;
    }
}

@media screen and (min-width: 560px)  and (orientation:portrait) {
  :root {
    --header-height: 9rem;
  }
}

@media screen and (min-width: 560px)  and (orientation:landscape) {
  :root {  
    --header-height: 5rem;
  }
}

@media screen and (min-width: 900px) {
  :root {
    --header-height: 8rem;
    --slider-width:340px;
    --slider-width2:340px;
    --slider-width3:340px;
    --slider-height:425px;
    --slider-start:340px;
    --slider-end:-340px;
    }
}

html {
  scroll-behavior:smooth;
}
body {
  width: 100%;
}
#top {width: 100%;}
h1, h2, h3, h4, h5, p {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
a {
    color: var(--color-primary);
}
.wrapper {
  padding: .5rem 1rem 0rem;
  width: 100vw;
  max-width: var(--max-width);
  margin: 0 auto;
}
/* Privacy Wire */
#privacywire-wrapper  .privacywire-banner,
#privacywire-wrapper  .privacywire-options {
  font-size: 70%;
  padding: 1rem;
  max-width: var(--max-width);
  margin: 0 auto;
}
@media screen and (min-width: 560px) {
  #privacywire-wrapper .privacywire-banner,
  #privacywire-wrapper  .privacywire-options {
    padding: 1rem 10vw;
  }
}
#privacywire-wrapper .privacywire-buttons {
  display: flex;
  justify-content: space-evenly;
}
#privacywire-wrapper button {
  padding: 5px 10px;
  width: auto;
  display: inline-block;
  text-align: center;
  margin: .5rem;
  border-radius: 5px;
  background-color: var(--color-primary);
  color: white;
}
#privacywire-wrapper button:hover {
  background-color: green;
}
.privacywire-text #statistics,
.privacywire-text #necessary {
  appearance: checkbox;
  height: 13px;
  width: 21px;
}

/* Typografie */
@font-face{
  font-family:euclid circular a;
  font-style:normal;font-weight:400;
  src:local('Euclid Circular A'),url('https://fonts.cdnfonts.com/s/60248/Euclid Circular A Regular.woff') format('woff');
  font-display: swap;
}
@font-face{
  font-family:euclid circular a;
  font-style:italic;font-weight:400;
  src:local('Euclid Circular A'),url('https://fonts.cdnfonts.com/s/60248/Euclid Circular A Italic.woff') format('woff');
  font-display: swap;
}
@font-face{
  font-family:euclid circular a;
  font-style:normal;font-weight:300;
  src:local('Euclid Circular A'),url('https://fonts.cdnfonts.com/s/60248/Euclid Circular A Light.woff') format('woff');
  font-display: swap;
}
@font-face{
  font-family:euclid circular a;
  font-style:italic;font-weight:300;
  src:local('Euclid Circular A'),url('https://fonts.cdnfonts.com/s/60248/Euclid Circular A Light Italic.woff') format('woff');
  font-display: swap;
}
@font-face{
  font-family:euclid circular a;
  font-style:normal;font-weight:500;
  src:local('Euclid Circular A'),url('https://fonts.cdnfonts.com/s/60248/Euclid Circular A Medium.woff') format('woff');
  font-display: swap;
}
@font-face{
  font-family:euclid circular a;
  font-style:italic;font-weight:500;
  src:local('Euclid Circular A'),url('https://fonts.cdnfonts.com/s/60248/Euclid Circular A Medium Italic.woff') format('woff');
  font-display: swap;
}
@font-face{
  font-family:euclid circular a;
  font-style:normal;font-weight:600;
  src:local('Euclid Circular A'),url('https://fonts.cdnfonts.com/s/60248/Euclid Circular A SemiBold.woff') format('woff');
  font-display: swap;
}
@font-face{
  font-family:euclid circular a;
  font-style:italic;font-weight:600;
  src:local('Euclid Circular A'),url('https://fonts.cdnfonts.com/s/60248/Euclid Circular A SemiBold Italic.woff') format('woff');
  font-display: swap;
}
@font-face{
  font-family:euclid circular a;
  font-style:normal;font-weight:700;
  src:local('Euclid Circular A'),url('https://fonts.cdnfonts.com/s/60248/Euclid Circular A Bold.woff') format('woff');
  font-display: swap;
}
@font-face{
  font-family:euclid circular a;
  font-style:italic;font-weight:700;
  src:local('Euclid Circular A'),url('https://fonts.cdnfonts.com/s/60248/Euclid Circular A Bold Italic.woff') format('woff');
  font-display: swap;
}
body {
/*  font-family: 'Playfair', serif;    */
  font-family: "Euclid Circular A", Arial, Helvetica, sans-serif;
  font-size: 16px;
}
h1 {font-size: 1.7rem;}
.pagetitle {
  color: var(--color-primary);
  font-weight: 300;
  letter-spacing: .1rem;
  padding-bottom: 1rem;
}
.section h2, h2, h3, h4, .subtitle, .subtitle2 {
  color: var(--color-secondary);
  text-transform: uppercase;
}
.section h2, h2 {
  font-size: 1.2rem;
}
.contact-box_text h2 {
  font-size: .9rem;
  font-weight: 200;
  letter-spacing: .1rem;
}
.contact-box_more-button {
  text-transform: uppercase;
}
.subtitle {
  font-size: 1.2rem;
  margin-top: 1rem;
}
.subtitle2 {
  font-size: 1em;
  text-align: right;
}
.section h3, h3 {
  font-size: 1rem;
}
.section p {
  font-size: 1rem;
  line-height: 1.5rem;
}
.block-box_text h4,
.block-box_text p,
.block-box_text_without-more h4,
.block-box_text_without-more p{
  font-size: 80%;
}
.block-box_text h4 {
  font-weight: 600;
  letter-spacing: .2rem;
  margin-bottom: .5rem;
}
.contact-box p, .section .block-box_text p {
  font-size: .8rem;
  line-height: normal;
}
.button_mehr {
  font-size: 80%;
  text-transform: uppercase;
}

.footer_address p {
  font-size: .8rem;
}
.footer_impressum-address p {
  font-size: .7rem;
}
strong {font-weight: bold;}
em {font-style: italic;}
.button.mtb-2 {margin: 2rem 0;}
blockquote {font-weight: bold; font-family: Arial, Helvetica, sans-serif;}


/* Header */
.header {
  position: sticky;
  top: 0;
  height: var(--header-height);
  width: 100%;
  background-color: var(--bg-color);
  z-index: 1000;
  box-shadow: 1px 1px 4px var(--bg-lightgrey);
  margin-bottom: 1rem;
}
.logo {
  height: calc(var(--header-height) - 1rem);
  margin: 0rem 1rem 0rem 0rem;
  display: flex;
  align-items: center;
}
.headline{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
}
.header_icon {
  height: calc(var(--header-height) - 3rem);
  margin: 0rem 0rem 0rem 1rem;
  align-self: center;
  display: flex;
  align-items: center;
  padding-left: 2rem;
}
.edit {
  display: block;
  width: 100%;
  text-align: right;
}

/* Main */
main {
  hyphens: auto;
  margin-top: var(--header-height);
}
.button {
  background-color: var(--color-primary);
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  cursor: pointer;
}

/* Footer */
.footer {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.footer_address-wrapper {
  background-color: var(--bg-lightgrey);
}
.footer_address {
  display: block;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 2rem;
  width: 100%;
}
.footer_impressum-wrapper {
  background-color: var(--bg-grey);
 }
.footer_impressum {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 0;
  width: 100%;
  display: grid;
  grid-template-areas:
    "social"
    "address";
}
.footer_impressum-socials {
  grid-area: social;
  display: flex;
  flex-direction: row;
  justify-content:center;
}
.social-icon {
  display: inline-block;
  margin: 0 .5rem;
}
.footer_impressum-address {
  grid-area: address;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0 2rem .5rem;
}

/* Scroll to top */
.scroll_totop_button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-tertiary);
  color: white;
  text-align: center;
  font-weight: 900;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
/*  z-index: 100;*/
  font-size: 1.5rem;
}

.scroll_totop_button{
  opacity: 0;
  transition: 1.5s opacity ease-in-out;
}
.scroll_totop_button.active{
  opacity: 1;
}


/* Intro Box */
.intro-box {
  flex: 2 1 55%;
  margin: 0;
}
.intro-box picture {
  margin: 0rem 2rem 0rem 0;
}

/* First content - Contact Box */
.contact-box {
  flex: 1 2 40%;
  margin: 1rem 0rem;
  box-shadow: -1rem 3rem 6rem gray;
  align-self: start;
}
.contact-box_text {
  padding: 2rem 2rem 1rem 2rem;
}
.contact-box_text h2 {
  margin-bottom: .5rem;
}
.contact-box_more-button {
  padding: 0 2rem 1rem 2rem;
  display: grid;
  grid-template-columns: minmax(4rem,9rem) minmax(2rem, 1fr);
  align-items: center;
  justify-content: space-between;
}
.contact-box_more-icon {
  display: inline-block;
  height: auto;
  width: auto;
  max-height: 2rem;
  max-width: 2rem;
}


/* Content */
.pretitle {
  font-size: .8rem;
  color: var(--bg-grey);
  margin-top: 3rem;
}
.section {
  overflow: auto;
  scroll-margin-top: var(--header-height);
}
.section-line:not(:last-of-type)::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  margin: 3rem 0rem 0rem;
}
.section-block{
  display: grid;
  overflow: initial;
  scroll-margin-top: var(--header-height);
  margin-bottom: 3rem;
}
.section-row {
  display: flex;
  flex-direction: column;
  max-width: 90vw;
}

.reveal{
  position: relative;
  transform: translateX(50vw);
  opacity: 0;
  transition: .5s all ease-in-out;
  align-self: center;
}

.reveal.active{
  transform: translateX(0);
  opacity: 1;
  align-self: center;
}

.section h2, h2 {
  margin: 0rem 0 1rem;
}
.section.service-page h2 {
    margin: 1.6rem 0 0rem;
}
.section h3, h3 {
  margin-top: 1rem;
}
.section.service-page ul {
    list-style-type: circle;
}
.section.service-page li {
    list-style-type: circle;
}
.buttons_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  grid-gap: 1rem;
}
.buttons_grid a {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Themen */
.themen-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  grid-gap: 2rem;
}  

.themen_images {
  max-width: 84vw;
  margin: 1rem 0;
}
.themen_images img {
  width: 100%;
  box-shadow: -1px 1px 12px var(--bg-lightgrey);
}

/* Blocks */


/* Block box */
.block-box_section {
  flex: 1 1 40%;
  max-width: var(--slider-width);
  margin: 2rem 0rem;
  border: 0.1rem ridge var(--color-secondary);
  box-shadow: 3px 3px 20px var(--bg-lightgrey);
  align-self: center;
}
.block-box_text {
  max-width: var(--slider-width);
  padding: 2rem 2rem 1rem 2rem;
  border-bottom: 1px dashed var(--color-secondary);
}
.block-box_text_without-more {
  max-width: var(--slider-width);
  padding: 2rem 2rem 2rem 2rem;
}
.block-box_text h2 {
  margin-bottom: .5rem;
}
.block_engagiert{
  height: auto;
  margin:2rem 0rem;
  align-self: start;
  overflow: hidden;
}
.block_engagiert-bilder{
  width: var(--slider-width);
  /* height: var(--slider-height); */
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  overflow: hidden;
}
.block_engagiert-bilder2{
  width: var(--slider-width2);
  height: var(--slider-height);
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  overflow: hidden;
}
.block_engagiert-bilder3{
  width: var(--slider-width3);
  height: var(--slider-height);
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  overflow: hidden;
}
.block_engagiert-bild {
  /* width: 400px;
  height: 500px; */
}
.block_engagiert-bild img {
    width: 85%;
}

/* Slider mit 2 Bildern */
.slide21,
.slide22 {
  width: var(--slider-width);
  height: var(--slider-height);
  opacity: 1;
  position: absolute;
  animation-delay: 5s;
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.slide21 {
  left: 0;
  animation-name: fade21;
}
.slide22 {
  left: var(--slider-start);
  animation-name: fade22;
}
@keyframes fade21 {
  0% {opacity:1;left: 0px}
  8% {opacity: 1;left:var(--slider-end)}  
  10% {opacity: 0;left:var(--slider-end)}  
  49% {opacity: 0;left:var(--slider-start)}
  50% {opacity: 1;left:var(--slider-start)}  
  59% {opacity: 1; left: 0} /* slide in*/
  100% {opacity: 1;left: 0}
}
@keyframes fade22 {
  0% {opacity:1;left:var(--slider-start)} /* slide in*/
  8% {opacity: 1;left:0px} /*show */
  50% {opacity: 1;left:0px}
  59% {opacity: 1;left:var(--slider-end)}
  60% {opacity: 0; left: var(--slider-end)}
  100% {opacity: 0;left:var(--slider-start)}
}


/* Slider mit 3 Bildern */
.slide31,
.slide32,
.slide33 {
  width: var(--slider-width);
  height: var(--slider-height);
  opacity: 1;
  position: absolute;
  animation-delay: 5s;
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.slide31 {
  left: 0;
  animation-name: fade31;
}
.slide32 {
  left: var(--slider-start);
  animation-name: fade32;
}
.slide33 {
  left: var(--slider-start);
  animation-name: fade33;
}
@keyframes fade31 {
  0% {opacity:1;left: 0px}
  8% {opacity: 1;left:var(--slider-end)}  
  33% {opacity: 0;left:var(--slider-end)}
  41% {opacity: 0; left: var(--slider-start)} /* que back*/
  66% {opacity: 1;left:var(--slider-start)} /* slide in*/
  74% {opacity: 1;left: 0px}  /*show */
  100% {opacity:1;left: 0px}
}
@keyframes fade32 {
  0% {opacity:1;left:var(--slider-start)} /* slide in*/
  8% {opacity: 1;left:0px} /*show */
  33% {opacity: 1;left:0px}
  41% {opacity: 1;left:var(--slider-end)} 
  66% {opacity: 0;left:var(--slider-end)}
  74% {opacity: 0;left:var(--slider-start)} /* que back*/
  100% {opacity:0;}
}
@keyframes fade33 {
  0% {opacity:0;left:var(--slider-start)} /* que back*/
  8% {opacity: 0;} 
  33% {opacity: 1;left:var(--slider-start)} /* slide in*/
  41% {opacity: 1;left:0px}/*show */
  66% {opacity: 1;left:0px}
  74% {opacity: 1;left:var(--slider-end)}  
  100% {opacity:0;left:var(--slider-end)}
}

.block-box_more {
  display: grid;
  grid-template-columns: minmax(70%,9rem) minmax(2rem, 1fr);
  align-items: center;
  justify-content: space-between; 
  padding: 1rem 1rem 1rem 2rem;
}
.block-box_more-icon {
  display:inline-block;
  width: 40px; /* as icon width*/
  height: auto;
  margin-left: 1rem;
}
@media screen and (min-width: 560px) {
  .block-box_more-icon {
    margin:1rem;
  }
}
.block-box_more-button {
  display: flex;
  align-items: center;
}



/* Formular */
input, textarea {
  width: 100%;
}
.fieldwrapper {
  width: var(--form-field-width);
  max-width: var(--form-field-max-width);
}
.field_combi2 {
  margin: 1rem 0;
  display: grid;
  grid-row-gap: 1rem;
  grid-column-gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(var(--form-field-max-width), 1fr));
}
#middlename {
  display: none;
}
.fields_address {
  display:grid;
  grid-column-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(5rem,auto));
  max-width: var(--form-field-max-width);
  width: var(--form-field-width);
}
.thefield {
  border: 2px solid var(--bg-grey);
  width: var(--form-field-width);
  padding: 3px;
  max-width: var(--form-field-max-width);
}
.fieldwrapper.plz,
.thefield.plz {
  width: 4rem;
}
.fieldwrapper.city,
.thefield.city {
  width: auto;
  max-width: 19rem;
}
.fieldwrapper.msg,
.thefield.msg {
  width: var(--form-field-width);
}
.submitdiv {
  background-color: var(--color-primary);
  padding: 1rem 2rem;
  margin: 2rem;
  width: auto;
  max-width: 15rem;
  border-radius: 1rem;
  cursor: pointer;
}
.error {
  color: red;
}
@media screen and (min-width: 360px) {
  .wrapper {
    padding: .5rem 1.5rem;
  }
  h1 {
    font-size: 1.9rem;
  }
  .subtitle {
    font-size: 1.5rem;
    margin-top: 1rem;
  }
  .subtitle2 {
    font-size: 1.3rem;
    text-align: right;
  }
  .section h2, h2,
  .section h3, h3 {
    font-size: 1.3rem;
  }
  .section p {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .contact-box{
    margin: 2rem 1rem;
    justify-self: center;
    flex: 1 1 40%;
  }
  .block-box_more {
    grid-template-columns: minmax(75%,9rem) minmax(2rem, 1fr);
  }
}

@media screen and (min-width: 560px) {
  body {
    font-size: 18px;
  }
  .section h2, h2,
  .section h3, h3 {
    font-size: 1.6rem;
  }
  .wrapper {
    padding: .5rem 1.5rem;
  }
  .footer_impressum {
    grid-template-areas: 'address social';
    align-items: center;
  }
  .footer_impressum-socials {
    justify-content:flex-start;
    padding: 1rem 2rem 1rem;
  }
  .footer_impressum-address {
    grid-area: address;
    display: block;
    padding: 1rem 2rem 1rem;
  }
  .contact-box{
    margin: 2rem;
    max-width: 320px;
  }
  .contact-box.contact-box_no-image {
      align-self: center;
  }
  .block-box_more {
    grid-template-columns: minmax(80%,9rem) minmax(2rem, 1fr);
  }
}
@media screen and (min-width: 560px)  and (orientation:portrait) {
  .header {
    margin-bottom: 3rem;
  }
}

@media screen and (min-width: 560px)  and (orientation:landscape) {
  .header {
    margin-bottom: 2rem;
  }
}

@media screen and (min-width: 900px) {
  .header {
    margin-bottom: 4.5rem;
  }
  .header_icon {
    height: calc(var(--header-height) - 2rem);
    margin: 1rem 2rem 0rem 3rem;
  }
    h1 {
    font-size: 3.5rem;
  }
  .subtitle {
    font-size: 2.5rem;
  }
  .subtitle2 {
    font-size: 1.5rem;
  }
  .section-row {
    flex-direction: row;
  }
  .intro-box picture {
    margin: 0rem 2rem 0rem 0;
  }
  .block_text-section,
  .block_text-section-more {
    margin-right: 4rem;
  }
  .block_text-section {
    flex: 1 1 65%;
  }
  .block_engagiert,
  .block-box_section {
    margin:2rem 1rem;
  }
    .block_text-section-more {
    flex: 1 2 55%;
  }
  .block_text-section ul,
  .block_text-section-more ul {
    margin: 1rem;
  }  
}