/* Schrift:

  1. transfonter.org
  2. Schrift reinziehen
  3. Hacken bei TTF, EOT, WOFF, WOFF2
  4. convert
  5. download
  6. stylesheet.css hier einfügen
  7. Schriften beim Transmit css - fonts Ordner
  8. vor allen urls fonts/ hinzufügen!
  9. bei body - font-family den Namen hinzufügen

*/

@font-face {
  font-family: 'Aventa';
  src: url('fonts/Aventa-Bold.eot');
  src: url('fonts/Aventa-Bold.eot?#iefix') format('embedded-opentype'),
      url('fonts/Aventa-Bold.woff2') format('woff2'),
      url('fonts/Aventa-Bold.woff') format('woff'),
      url('fonts/Aventa-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aventa';
  src: url('fonts/Aventa-Regular.eot');
  src: url('fonts/Aventa-Regular.eot?#iefix') format('embedded-opentype'),
      url('fonts/Aventa-Regular.woff2') format('woff2'),
      url('fonts/Aventa-Regular.woff') format('woff'),
      url('fonts/Aventa-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Hintergrundfarbe Header */
.header {
  background:#084911;
  padding: clamp(1rem, 2vw, 2rem) 0;
}

/* Hintergrundfarbe Footer */
.footer {
  background:#084911;
  padding: clamp(1rem, 2vw, 2rem) 0;
  align-items: center;
}

/* Farbe Navigation */
.navigation a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  margin-left: clamp(2rem, 4vw, 4rem);
}

/* Farbe Slider Pfeile */
.swiper-button-next:after, .swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none!important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
  color: 084911;
}

/* Farbe und Hintergrundfarbe Slogan */
#slogan {
  font-size: 110;
  text-transform: uppercase;
  font-family: "Italianno", serif;
  font-weight: bold;
  color: 71FF04;
  line-height: 1;
  padding: 130;
  background-color: #084911;
  text-align: center;
}

body {
  background: var(--background);
  color: var(--white);
  font-family: "Newsreader", serif;
  padding: 0;
  margin: 0;
}

img.bild {
  width: 100%;
  height: clamp(25em, 40vw, 40em);
  object-fit: cover;
}

div {
  display: block;
}

.responsive-meldung p {
  position: absolute;
  bottom: 50%;
  right: 50%;
  color: white;
  transform: translate(50%, 50%);
  font-size: clamp(1.5em, 4.5vw, 4.5em);
  text-align: center;
}
p {
  font-size: 1.1rem;
  font-weight: lighter;
  line-height: 1.5;
}

.header section#menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.center {
  display: block;
  margin: 0 auto; 
}

.grid {
  position: relative;
  display: grid;
  row-gap: clamp(0.4em, 1vw, 1em);
  column-gap: clamp(5em, 1vw, 1em);
  grid-auto-rows: minmax(min-content, max-content);
  width: 100%;
  }

.grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid.equalcolumn {
  grid-auto-columns: 1fr;
}

.column-gap-4 {
  column-gap: clamp(1.8em, 4vw, 4em);
}

.swiper {
    width: 100%;
    height: 80vh;
}

.swiper-pointer-events {
  touch-action: pan-y;
}

.mb-5 {
  margin-bottom: clamp(2.4em, 5vw, 5em);
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-slide img {
  width: 100%;
  height: clamp(60rem, 50vw, 70rem);
  object-fit: cover;
}

.header section#box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#wide {
  position: relative;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

#box {
  width: calc(100% - 40px);
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
}

#menu {
  position: relative;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

#logo {
  width: 150;
}

#container {
  width: 100%;
  display: inline-block;
}

#slider {
  width: 100%;
}

/* RESPONSIVE */

.responsive-meldung {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh; 
  height: calc(var(--vh, 1vh) * 100);
  background-color: #0b1d26;
  z-index: 10;
}

h2  { 
  font-family: Italianno;
  color: 27A743;
  font-size: 60px;
}

@media only screen and (max-width: 1200px) {
  .responsive-meldung {
      display: block;
  }
}