:root {
    --orange1: rgba(255,129,0,1);
    --weiss: rgba(255,255,255,1);
    --schwarz: rgba(0,0,0,1);
    --dunkelgrau1: rgba(56,56,54,1);
    --dunkelgrau2: rgb(33, 33, 32);
    --offwhite: rgba(250,250,248,1);
    --offwhiteblass: rgba(250,250,248,0.2);
    --hellgrau1: rgba(245,245,244,1);
    /* Overrides */
    --swiper-theme-color: rgba(255,129,0,1); /* orange */
    --swiper-navigation-color: rgba(255,129,0,1); /* orange */
    --swiper-navigation-size: 20px;
    
    --maxbreite: 1600px;
    --satzspiegeleinzug: 3em;
}

html {
    scroll-behavior: smooth;
    font-size: min(max(1rem, 4vw), 18px);
}

html,
body {
    margin: 0 auto;   /* zentriert */
    padding: 0;
    height: 100%;
    font-family: 'TT Norms Pro';
    font-weight: 400;
    /*font-size: 100%;*/
    max-width: var(--maxbreite);
    color: var(dunkelgrau2);
}

/* Silbentrennung */

p {
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 2;
    -webkit-hyphenate-limit-after: 3;
    -webkit-hyphenate-limit-chars: 6 2 3;
    -webkit-hyphenate-limit-lines: 3;
    -webkit-hyphenate-limit-last: always;   
    -webkit-hyphenate-limit-zone: 8%;

    -moz-hyphens: auto;
    -moz-hyphenate-limit-chars: 6 2 3;
    -moz-hyphenate-limit-lines: 3;  
    -moz-hyphenate-limit-last: always;
    -moz-hyphenate-limit-zone: 8%;

    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: 6 2 3;
    -ms-hyphenate-limit-lines: 3;
    -ms-hyphenate-limit-last: always;   
    -ms-hyphenate-limit-zone: 8%;

    hyphens: auto;
    hyphenate-limit-chars: 6 2 3;
    hyphenate-limit-lines: 3;
    hyphenate-limit-last: always;   
    hyphenate-limit-zone: 8%;
}

/* Swiper Overrides */

.swiper-button-next,
.swiper-button-prev {
    color: var(--weiss);
    background-color: var(--offwhiteblass);
    padding: 10px 8px 10px 12px;
    border-radius: 50%;
    width: var(--swiper-navigation-size);
} 
.swiper-button-prev {
    padding: 10px 12px 10px 8px;
}

/* Standards */

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

body {
  /* padding: 2% 5%; */
  line-height: 1.4;
}

/* Footer nach unten */

.fullpage {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: normal;
    align-content: normal;
    min-height: 100%
}

.fullpage-content {
    display: block;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    align-self: auto;
    order: 0;
}

.fullpage-footer {
    display: block;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    align-self: auto;
    order: 0;
}

/* bis hierher: Footer nach unten */

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

h1, h2, h3 {
    text-transform: uppercase;
}

.mager {
    font-weight: 400;
}

/* header */

.header {
    background-color: var(--orange1);
    position: fixed;
    top: 0;
    width: 100%;
    max-width: var(--maxbreite);   /* maximale Menubreite */
    z-index: 3;
    
    -webkit-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.03);
    -moz-box-shadow:    0px 10px 10px 0px rgba(0, 0, 0, 0.03);
    box-shadow:         0px 10px 10px 0px rgba(0, 0, 0, 0.03);
}

.header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: transparent;
}

.header li a,
.header li form {
    display: block;
    padding: 20px 20px;
    border-right: 1px solid rgba(255,255,255,0.25);;
    text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
    background-color: rgba(255,255,255,0.15);
}


.header .logo {
    display: block;
    float: left;
    font-size: 2em;
    padding: 10px 20px;
    text-decoration: none;
}

/* menu */

.header .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 28px 20px;
    position: relative;
    user-select: none;;
}

.header .menu-icon .navicon {
    background: black;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
    background: black;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}

.header .menu-icon .navicon:before {
    top: 5px;
}

.header .menu-icon .navicon:after {
    top: -5px;
}

/* menu btn */

.header .menu-btn {
    display: none;
}

.header .menu-btn:checked ~ .menu {
    max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
}

/* Menubreakpoint 48em = 768px */

@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a,
  .header li form {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}



button {
    background-color: transparent; 
    text-transform: uppercase;
    border-radius: 3px; 
    padding: 0.5em 1.7em; 
    font-size: 0.8em;
    color: var(--schwarz);
    border: 1px solid var(--schwarz);
}

button.hell {
    color: var(--offwhite);
    border: 1px solid var(--offwhite); 
}

button.dunkel {
    color: var(--dunkelgrau1);
    border: 1px solid var(--dunkelgrau1); 
}

.abstand {
    height: 12em;
}

footer {
    /*position: absolute;
    bottom: 0;
    width: 100%;
    min-height: 5em;*/
    margin: 0;
    padding: 0;
}

.footer {
    background-color: var(--dunkelgrau2);
    color: #ffffff;
    padding: 3em 0 1.5em 0;
    text-align: center;
}


/* allgemeine Einstellungen */

.satzspiegel {
    margin-left: var(--satzspiegeleinzug);
    margin-right: var(--satzspiegeleinzug);
}

/* --cointentbreakpoint = 48em */

@media (max-width: 48em) {
    .satzspiegel {
        margin-left: 1em;
        margin-right: 1em;
    }
}


.datenschutz h3,
.datenschutz h4 {
    font-weight: bold;
}

/* Info Inhalte */

.infocontent.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.infocontent.twocolumns .flex-item:nth-child(1) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 2 1 15em;
    -ms-flex: 2 1 15em;
    flex: 2 1 15em;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    border: 1px dotted green;
}

.infocontent.twocolumns .flex-item:nth-child(2) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 2 1 auto;
    -ms-flex: 2 1 auto;
    flex: 2 1 auto;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.infocontent.flex-container2 {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.flex-item2:nth-child(1) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 2 1 300px;
    -ms-flex: 2 1 300px;
    flex: 2 1 300px;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.flex-item2:nth-child(2) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 150px;
    -ms-flex: 1 1 150px;
    flex: 1 1 150px;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.flex-item2:nth-child(3) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 150px;
    -ms-flex: 1 1 150px;
    flex: 1 1 150px;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

/* Flex gap Trick */

.emulated-flex-gap > * {
  margin: 12px 0 0 12px;
}

.emulated-flex-gap {
  display: inline-flex;
  flex-wrap: wrap;
  margin: -12px 0 0 -12px;
  width: calc(100% + 12px);
}

/* bis hierher Flex-Gap-Trick */

/* multicolumn-css */                                     /* für später */
.example {
  -webkit-column-count: 2; /* Ch, Saf, And, BB  */
     -moz-column-count: 2; /* Fx */
          column-count: 2; /* IE 10, Op 11.1+ */

  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;

  -webkit-column-rule: 1px solid #000;
     -moz-column-rule: 1px solid #000;
          column-rule: 1px solid #000;
}
/* bis hierher */


/* mehr spaltiger Text (Muster)  */

.zweispaltig {
    column-count: 2;
    column-gap: 1em;
}


/* Ein- und Ausblenden der Schrift und des Buttons per Javascript */

.einblenden {
    opacity: 0.5;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.einblenden.danach {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}

.sichtbar {
    opacity: 1;
}

.sectionbild {
    /*height: 100vh;*/
    height: 75vw;  /*4 zu 3 */
    max-height: 85vh;  /* aber nicht groesser als 85 Prozent der Hoehe */
    width: 100%;
}

.hintergrund {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-size: cover;
}

#titelbild .hintergrund {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.2)), url(../images/lkw2.jpg); 
    background-position: center center;
}

.inbildinfo {
    -webkit-position: relative;
    position: relative;
    bottom: 12em;
    width: 100%;
}


/* Animationen */

@keyframes verkleinerer {
    0%   {height: 100vh;}
    100% {height: 0;}
}

@keyframes ueberblender {
    0%   {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes einblender {
    0%   {opacity: 0;}
    60%  {opacity: 0;}
    100% {opacity: 1;}
}



/* Datenschutzseite */

.datenschutz {
    padding-top: 10rem;
    padding-bottom: 4rem;
}

.datenschutz h1,
.datenschutz h2,
.datenschutz h3,
.datenschutz h4,
.datenschutz h5,
.datenschutz h6,
.datenschutz p {
    text-align: left;
    letter-spacing: 0.02em;
    margin-bottom: -0.4em;
}

.datenschutz h1,
.datenschutz h2 {
    margin-top: 1.5em;
}

.datenschutz h1 {
    font-weight: 700;
}

.datenschutz h2 {
    padding-top: 0.5em;
}


/* Scroll Snap von https://codepen.io/kholja/pen/QWbVRdx und https://blog.kulturbanause.de/2019/02/css-scroll-snap/ */

/*
<!-- Note: If you want to use body or html as the snap container you can run into issues as safari needs body but ff and chrome need html as parent. So better use a container element. -->
<iv class="scrollsnapbereich">
  <section class="snapp"><h2>ONE</h2></section>
  <section class="snapp"><h2>TWO</h2></section>
  <section class="snapp"><h2>THREE</h2></section>
  <section class="snapp"><h2>FOUR</h2></section>
</div> */

* {
  /*box-sizing: border-box;*/
}

.scrollsnapbereich {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  /* 2018 spec - For Safari 11, Chrome 69+ FF*/
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch; /* Needed on iOS Safari */
  /* 2015 spec - For Firefox, Edge, IE 
  scroll-snap-type: mandatory;
  -ms-scroll-snap-type: mandatory;
  scroll-snap-points-x: repeat(100%);
  -ms-scroll-snap-points-x: repeat(100%);
  scroll-snap-points-x: initial;
  -ms-scroll-snap-points-x: initial;
  scroll-snap-points-y: repeat(100%);
  -ms-scroll-snap-points-y: repeat(100%);
  */
}

h2{
  text-align: center;
}
section.snapp {
  scroll-snap-align: start; /* Stop at the top */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  background: #146585;
}

section.snapp:nth-of-type(even) {
  background: #2b8664;
}


/* cards Layout von https://codepen.io/mhrkit/pen/GGqdvr*/

/*
<div class="main">
  <ul class="cards">
    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="image.jpg"></div>
        <div class="card_content">
          <h2 class="card_title">blablaheadline</h2>
          <p class="card_text">blablatext</p>
          <button class="btn card_btn">mehr</button>
        </div>
      </div>
    </li>
    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="image.jpg"></div>
        <div class="card_content">
          <h2 class="card_title">blablaheadline</h2>
          <p class="card_text">blablatext</p>
          <button class="btn card_btn">mehr</button>
        </div>
      </div>
    </li>
    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="image.jpg"></div>
        <div class="card_content">
          <h2 class="card_title">blablaheadline</h2>
          <p class="card_text">blablatext</p>
          <button class="btn card_btn">mehr</button>
        </div>
      </div>
    </li>
    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="image.jpg"></div>
        <div class="card_content">
          <h2 class="card_title">blablaheadline</h2>
          <p class="card_text">blablatext</p>
          <button class="btn card_btn">mehr</button>
        </div>
      </div>
    </li>
    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="image.jpg"></div>
        <div class="card_content">
          <h2 class="card_title">blablaheadline</h2>
          <p class="card_text">blablatext</p>
          <button class="btn card_btn">mehr</button>
        </div>
      </div>
    </li>
    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="image.jpg"></div>
        <div class="card_content">
          <h2 class="card_title">blablaheadline</h2>
          <p class="card_text">blablatext</p>
          <button class="btn card_btn">mehr</button>
        </div>
      </div>
    </li>
  </ul>
</div>
*/

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


.cards img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.cards .btn {
  color: #ffffff;
  padding: 0.8rem;
  font-size: 14px;
  text-transform: uppercase;
  border-radius: 4px;
  font-weight: 400;
  display: block;
  width: 100%;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
}

.cards .btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.cards {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cards_item {
  display: flex;
  padding: 1rem;
}

@media (min-width: 40rem) {
  .cards_item {
    width: 50%;
  }
}

@media (min-width: 56rem) {
  .cards_item {
    width: 33.3333%;
  }
}

.card {
  /* background-color: white;
  border-radius: 0.25rem;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25); */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card_content {
  padding: 1rem;
  /* background: linear-gradient(to bottom left, #EF8D9C 40%, #FFC39E 100%); */
}

.card_title {
  /* color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: capitalize;
  margin: 0px; */
}

.card_text {
  /* color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;    
  font-weight: 400; */
}