@charset "UTF-8";
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  /* Schriftdicke in Form eines Bereichs angeben = Zwischenwerte */
  font-display: swap;
  src: url(../fonts/jost/Jost-VariableFont_wght.ttf) format("truetype");
  /* Unterstützt versch. Schriftdicken*/
}
/* Farben */
/* umrechnen mit dem math-module */
/* Breakpoints */
/*1290px oder schmaler */
/* 1200px oder schmaler */
/* 992px oder schmaler */
/* 768 px oder schmaler */
/* 576 px oder schmaler */
/* 400 px oder schmaler */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  font-family: "Jost", sans-serif;
  /* neuen Font einbinden (GoogleFonts) */
}
@media (min-width: 100em) {
  html {
    /* Optimierung des Responsive Designs für alle Bildschirmgrößen */
    font-size: 133%;
  }
}
@media (min-width: 150em) {
  html {
    font-size: 166%;
  }
}
@media (min-width: 166em) {
  html {
    font-size: 200%;
  }
}
@media (max-height: 25rem) {
  html {
    /* für ganz kleine Bildschirmbreiten (smartphones) */
    font-size: 75%;
  }
}

input,
select {
  font-family: inherit;
  /* damit soll in unseren eingabefeldern automatisch die von uns bevorzugte Schrift verwendet werden */
}

::-moz-selection {
  /* mixin, welches unten via @include wieder aufgerufen wird */
  color: white;
  background-color: rgba(1, 24, 32, 0.8);
}

::selection {
  /* mixin, welches unten via @include wieder aufgerufen wird */
  color: white;
  background-color: rgba(1, 24, 32, 0.8);
}

.container {
  max-width: 75rem;
  /* orientiert sich an standardschriftgröße d. Browsers (breite geht nicht mehr über gesamte Breite */
  margin: 0px auto;
  /* setzt automatisch einen gleichen Abstand rechts und links (zentrieren) */
  padding: 0 2rem;
}
.container::after {
  display: block;
  clear: both;
  content: "";
}
@media (max-width: 62em) {
  .container {
    padding: 0 1rem;
  }
}

.header {
  height: 35rem;
  min-height: calc(13rem + 32vw);
  /* Responsive Design: erspart uns media-queries und deckt den vollst. Zoombereich ab (= Mobilgeräte) */
  background-image: linear-gradient(-5.7391704773deg, white 49.9%, transparent 50.1%), url(../images/pexels-eberhard-grossgasteiger-691571.jpg);
  background-repeat: no-repeat, no-repeat;
  background-position: center 100%, center center;
  /* je zwei Werte auf der x- und y-Achse wegen 2 images */
  background-size: 100vw 10vw, cover;
  position: relative;
  overflow: hidden;
}
@media (max-width: 75em) {
  .header {
    height: calc(18rem + 32vw);
  }
}
@media (max-width: 36em) {
  .header {
    height: calc(10rem + 32vw);
  }
}

.gradient {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.01));
  /* für den dunklen hintergrund in der navbar */
}

.header__heading-container {
  clear: both;
  /* Text, bzw. Überschrift soll nicht mehr vom übrigen Text umflossen werden. Positioniert sich unter der Naviation */
}

.header__heading-main {
  font-weight: 700;
  /* Zahlenwerte lassen sich besser animieren */
  font-size: 7rem;
  letter-spacing: 0.1rem;
  text-align: center;
  color: #ffffff;
  text-transform: uppercase;
  /* wandelt kleine Buchstaben in große um. Denn: die semant. Bedeutung folgt eig. Groß- und Kleinschreibung */
  animation-name: header__heading-main-font-weight;
  animation-delay: 0.75s;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  /* damit beginnt die Animation bei 0, beim gewünschten Startpunkt */
  /* Konfiguration für die mobile Ansicht = kleinere Schrift & eingefügte Variable */
}
@media (max-width: 75em) {
  .header__heading-main {
    font-size: 6rem;
  }
}
@media (max-width: 62em) {
  .header__heading-main {
    font-size: 5rem;
  }
}
@media (max-width: 48em) {
  .header__heading-main {
    font-size: 3rem;
    /* Weiterer Breakpoint, Konfiguration für die mobile Ansicht = kleinere Schrift & eingefügte Variable */
  }
}
@media (max-width: 36em) {
  .header__heading-main {
    font-size: 2.6rem;
  }
}
@media (max-width: 25rem) {
  .header__heading-main {
    font-size: 2.3rem;
  }
}

@keyframes header__heading-main-font-weight {
  0% {
    opacity: 0;
    font-weight: 100;
  }
  100% {
    opacity: 1;
    font-weight: 700;
  }
}
.header__heading-sub {
  font-size: 3rem;
  letter-spacing: 0.3rem;
  text-align: center;
  color: #ffffff;
  text-transform: uppercase;
  /*text-shadow: 0 0 0.8rem #000000;*/
}
@media (max-width: 75em) {
  .header__heading-sub {
    font-size: 2.1rem;
  }
}
@media (max-width: 62em) {
  .header__heading-sub {
    font-size: 1.7rem;
  }
}
@media (max-width: 48em) {
  .header__heading-sub {
    font-size: 1.5rem;
  }
}
@media (max-width: 36em) {
  .header__heading-sub {
    font-size: 1rem;
  }
}
@media (max-width: 36em) {
  .header__heading-sub {
    font-size: 0.8rem;
  }
}

/* Konfiguration für die mobile Ansicht = kleinere Schrift & eingefügte Variable */
.navigation__list-item {
  font-size: 1.5rem;
  list-style-type: none;
  display: block;
  float: left;
}
.navigation__list-item--mobile-hidden {
  /* SASS fügt diesen Modifier mit dem oben stehenden dazugehörigen Klassen-Namen zusammen */
}
@media (max-width: 62em) {
  .navigation__list-item--mobile-hidden {
    /* ca. 992px, ab dieser Bildschirmgröße greifen die 62em (Smartphone) = Variable eingefügt */
    display: none;
  }
}
.navigation__list-item--menu {
  float: right;
  font-size: 3rem;
}

.navigation__list-item-link {
  cursor: pointer;
  text-decoration: none;
  color: #ffffff;
  padding: 0.5rem 0.25rem 0.25rem 0.25rem;
  margin-top: 2rem;
  margin-left: 2rem;
  margin-right: 2rem;
  display: block;
  text-shadow: 0rem 0rem 1rem #000000;
}
.navigation__list-item-link:hover {
  border-bottom: 0.15rem solid #c87d27;
  /* Variable für das hauptsächlich verwendete Farbtheme im Projekt */
}
.navigation__list-item--menu .navigation__list-item-link {
  /* Platzierung des Menu-Buttons.  Das & referenziert das Kindelement, die oben stehende list-item-link Klasse */
  font-size: 4rem;
  margin-top: 0.4rem;
  margin-right: 0;
  padding: 0;
}
.navigation__list-item--menu .navigation__list-item-link:hover {
  border-bottom: none;
  /* War vorher: .navigation__list-item--menu .navigation__list-item-link:hover (hover bezieht sich dieses mal auf --menu)  */
  color: #ada8a7;
  /*= (BEM) ersteres ist ein modifier. Man bezieht sich damit auf Elemente, die innerhalb einer anderen Anweisung gestyled sind*/
}
@media (max-width: 82em) {
  .navigation__list-item--menu .navigation__list-item-link {
    margin-top: 0.6rem;
    font-size: 3.2rem;
  }
}
@media (max-width: 62em) {
  .navigation__list-item--menu .navigation__list-item-link {
    margin-top: 0.6rem;
    font-size: 3.5rem;
  }
}
@media (max-width: 36em) {
  .navigation__list-item--menu .navigation__list-item-link {
    margin-top: 0.6rem;
    font-size: 2.2rem;
  }
}
.navigation__list-item-link--logo {
  margin-top: 0.9rem;
  padding-left: 0;
  margin-left: 0;
}
.navigation__list-item-link--logo:hover {
  border-bottom: none;
  color: #ada8a7;
}

.navigation__list-item-logo {
  width: 4rem;
  height: 4rem;
  /* logo oben LINKS */
  fill: currentColor;
}
@media (max-width: 82em) {
  .navigation__list-item-logo {
    width: 3rem;
    height: 3rem;
  }
}
@media (max-width: 75em) {
  .navigation__list-item-logo {
    width: 3rem;
    height: 3rem;
  }
}
@media (max-width: 62em) {
  .navigation__list-item-logo {
    width: 3rem;
    height: 3rem;
  }
}
@media (max-width: 36em) {
  .navigation__list-item-logo {
    width: 2.5rem;
    height: 2.5rem;
  }
}
@media (max-width: 36em) {
  .navigation__list-item-logo {
    width: 2rem;
    height: 2rem;
  }
}

.footer {
  background-color: #407682;
  padding: 3rem 0 0.5rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 36em) {
  .footer {
    padding: 0 1rem 0 1rem;
  }
}

.footer__container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-bottom: 0.175rem solid rgba(255, 255, 255, 0.2);
  /* erzeugt den schmalen Strich über dem footer */
  padding-bottom: 2rem;
}
@media (max-width: 48em) {
  .footer__container {
    /* Spalten im Responsive Design untereinander anzeigen */
    flex-direction: column;
  }
}
@media (max-width: 36em) {
  .footer__container {
    /* Spalten im Responsive Design untereinander anzeigen */
    flex-direction: column;
    padding-top: 1.5rem;
  }
}

.footer__text-column {
  flex: 0 0 auto;
  margin-right: 5rem;
  text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
}
@media (max-width: 48em) {
  .footer__text-column {
    /* Spalten im Responsive Design untereinander anzeigen */
    order: 2;
    /* TEXT steht dabei UNTER dem LOGO */
    margin-right: 0rem;
  }
}

.footer__logo-column {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
}
@media (max-width: 48em) {
  .footer__logo-column {
    /* Spalten im Responsive Design untereinander anzeigen */
    order: 1;
    /* LOGO steht dabei ÜBER dem Text */
    justify-content: start;
    /* LOGO soll links stehen, nicht mehr zentriert */
    padding-bottom: 2rem;
  }
}

.footer__heading {
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 3.3rem;
  max-width: 25rem;
  line-height: 1.1em;
}
@media (max-width: 36em) {
  .footer__heading {
    font-size: 3rem;
  }
}

.footer__paragraph {
  color: #c87d27;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.footer__contact-item {
  position: relative;
  margin-bottom: 0.75rem;
  /* abstand nach oben, zw. beiden buttons */
}
@media (max-width: 36em) {
  .footer__contact-item {
    font-size: 0.8rem;
    letter-spacing: 0.025rem;
  }
}

.footer__contact-item-icon {
  position: relative;
  z-index: 2;
  background-color: #c87d27;
  height: 4rem;
  width: 4rem;
  text-align: center;
  border-radius: 100000px;
  /* Kreis */
  font-size: 2.5rem;
  color: #407682;
}
.footer__contact-item-icon--phone {
  line-height: 3.9rem;
  /* modifier für konfiguration der icons */
}
@media (max-width: 36em) {
  .footer__contact-item-icon--phone {
    width: 3.5rem;
    height: 3.5rem;
    line-height: 3.5rem;
  }
}
@media (max-width: 36em) {
  .footer__contact-item-icon--mail {
    width: 3.5rem;
    height: 3.5rem;
    line-height: 3.2rem;
  }
}

.footer__contact-item-link {
  position: absolute;
  left: 2rem;
  top: 0.25rem;
  z-index: 1;
  /* liegt unter den logos */
  white-space: nowrap;
  /* alles in einer Zeile */
  background-color: #60a2b1;
  text-decoration: none;
  color: white;
  padding: 1rem 2rem;
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  width: 16rem;
  text-align: center;
  overflow: hidden;
}
.footer__contact-item-link::after {
  content: "";
  position: absolute;
  z-index: -1;
  /* liegt unter dem text, aber über dem farblichen hintergrund */
  top: 0;
  left: calc(-100% - 5rem);
  /* hintergrundbild muss zusätzlich nach links verschoben werden, damit die ecke vor dem hover nicht rausguckt = deswegen noch - 5rem */
  width: calc(100% + 5rem);
  /* hintergrundbild ist breit genug, damit es beim sliden über die gesamte breite reicht = deswegen noch + 5rem dazu */
  bottom: 0;
  background-image: linear-gradient(-45deg, transparent 2.82rem, #26464d 1.82rem);
  background-position: right center;
  background-repeat: no-repeat;
  transition: transform 0.5s ease-in-out;
  /* animiert das reinsliden der neuen farbe */
}
.footer__contact-item-link:hover {
  /* bezieht sich auf das element selbst, nicht auf die parents! */
}
.footer__contact-item-link:hover::after {
  transform: translate(100%, 0);
  /* neue farbe slidet beim hover rein: von links nach rechts */
}

.footer__logo-container {
  padding: 0.05em;
  font-size: 18rem;
  color: white;
  background-image: linear-gradient(135deg, #c87d27 0%, #26464d 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c87d27;
  border-radius: 10000000px;
}
@media (max-width: 62em) {
  .footer__logo-container {
    font-size: 12rem;
  }
}
@media (max-width: 48em) {
  .footer__logo-container {
    /* LOGO soll klein angezeigt werden */
    font-size: 6rem;
  }
}
@media (max-width: 36em) {
  .footer__logo-container {
    font-size: 4.5rem;
    /* LOGO soll noch kleiner angezeigt werden */
  }
}

.footer__logo-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.1em;
  border: 0.025em solid white;
  border-radius: 10000000px;
}

.footer__footer-list {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 36em) {
  .footer__footer-list {
    font-size: 0.8rem;
  }
}

.footer__footer-link {
  display: inline-block;
  /* erst dann greift das padding für die a-Element, sind inline! */
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  padding: 0.5rem 1.5rem;
  transition: color 0.4s ease-in-out;
}
.footer__footer-link:hover {
  color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 36em) {
  .footer__footer-link {
    padding: 0.5rem 0.5rem;
  }
}

.sidenav__opened {
  display: none;
}

.sidenav {
  display: block;
  position: fixed;
  z-index: 15000;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  transition: width 0s linear 1s, height 0s linear 1s;
}
.sidenav__opened:checked ~ .sidenav {
  transition: width 0s linear 0s, height 0s linear 0s;
  width: 100%;
  height: 100%;
}

.sidenav__background {
  /* anklickbarer hintergrund für das ein- und ausblenden des menüs */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.sidenav__opened:checked ~ .sidenav .sidenav__background {
  opacity: 1;
  /* wenn checkbox gechecked ist, soll navbar sichtbar sein */
}

.sidenav__container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 15rem;
  max-width: 100vw;
  /* schränkt die breite ein, für kleine bildschirme gedacht */
  background-color: #ebebeb;
  box-shadow: 0 0 1rem black;
  /* das 1rem wird unten verrechnet */
  transform: translate(calc(100% + 1rem), 0);
  /* menü soll sich um 100% nach rechts verschieben. +1rem, damit der schatten nicht mehr sichtbar ist, wenn die sidebar aufklappt */
  will-change: transform;
  /* zeigt dem browser an, es startet gleich eine animation */
  transition: transform 1s ease-in-out;
}
.sidenav__opened:checked ~ .sidenav .sidenav__container {
  transform: translate(0, 0);
}

.sidenav__close {
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
  cursor: pointer;
  color: transparent;
  border-radius: 1000px;
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background-image: linear-gradient(-45deg, transparent 44%, black 45%, black 55%, transparent 56%), linear-gradient(45deg, transparent 44%, black 44%, black 55%, transparent 56%);
}

.sidenav__nav {
  margin-top: 3.75rem;
  list-style-type: none;
  /* wird an die li-elemente vererbt */
  border-top: 0.0625rem solid gainsboro;
  /* für den ersten strich über "startseite" */
}

.sidenav__nav-link {
  font-size: 1.25rem;
  font-weight: 300;
  padding: 0.5rem 1.5rem;
  display: block;
  /* sollen untereinander stehen, keine inline-elemente */
  color: #26464d;
  text-decoration: none;
  border-bottom: 0.0625rem solid gainsboro;
  background-color: #ebebeb;
  transition: color 0.25s ease-in-out, font-weight 0.25s ease-in-out, background-color 0.25s ease-in-out;
}
.sidenav__nav-link:hover {
  color: #c87d27;
  background-color: white;
  font-weight: 500;
}

/* Das Modal (Standardmäßig unsichtbar) */
.modal {
  display: none;
  /* Unsichtbar */
  position: fixed;
  /* Bleibt an derselben Stelle */
  z-index: 5;
  /* Wird über anderen Inhalten angezeigt */
  left: 0;
  top: 0;
  width: 100%;
  /* Breite des Bildschirms */
  height: 100%;
  /* Höhe des Bildschirms */
  overflow: auto;
  /* Wenn Inhalt größer als das Modal ist, wird gescrollt */
  background-color: black;
  /* Schwarzer Hintergrund mit geringer Transparenz */
  background-color: rgba(0, 0, 0, 0.4);
  /* Schwarz mit Transparenz */
}

/* Modal-Inhalt */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  /* 15% von oben und automatisch zentriert */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  /* Breite des Modals */
}

/* Schließen-Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.icon {
  fill: currentColor;
  height: 1em;
  width: 1em;
  vertical-align: middle;
}
.icon:not(.icon--no-position) {
  position: relative;
  top: -0.075em;
}

.button {
  display: inline-block;
  border: 0.0625rem solid currentColor;
  /* BEM-Schreibweise :1 geteilt durch 16 = default-Schriftgröße */
  border-radius: 10000rem;
  /* so viel border-radius wie möglich */
  color: #c87d27;
  text-decoration: none;
  padding: 1rem 3rem;
  text-transform: uppercase;
  font-family: 700;
  font-size: 1.25rem;
  letter-spacing: 0.125rem;
  cursor: pointer;
  /* Mauszeiger = Klickzeiger ("Hand") */
}
.button:hover {
  color: #dc984a;
  /* Aufhellung des Buttons beim Hover */
}

.button--form {
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  color: black;
  background-color: #c87d27;
  border: 0.125rem solid #c87d27;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}
.button--form:hover {
  color: #323232;
}
@media (max-width: 36em) {
  .button--form {
    /* anpassung button (orange) unten rechts im modal */
    font-size: 0.8rem;
  }
}
@media (max-width: 25rem) {
  .button--form {
    font-size: 0.8rem;
  }
}

.button-background-blur {
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
}

.button--white {
  /* umgekehrt ist der Button beim Hover dunkler, wenn er sich auf einer hellen Fläche befindet */
  color: white;
  text-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.5);
}
.button--white:hover {
  color: gainsboro;
}

.button--secondary {
  color: white;
  background-color: #26464d;
  border: 0.125rem solid #26464d;
}
.button--secondary:hover {
  color: white;
  background-color: #407682;
  border: 0.125rem solid #407682;
}

.form__group {
  position: relative;
  margin-bottom: 1.5rem;
  margin-right: 1.5rem;
}
.form__group > .form__group {
  margin-right: 1.5rem;
  margin-bottom: 1rem;
}

.form__horizontal {
  display: flex;
  flex-wrap: wrap;
}

.form__input {
  background-color: transparent;
  border: 0.125rem solid #c87d27;
  /* BEM-Schreibweise :1 geteilt durch 16 = default-Schriftgröße */
  border-radius: 10000px;
  /* so viel border-radius wie möglich */
  padding: 0.75rem 1rem;
  color: #c87d27;
  text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
  font-size: 1rem;
  width: 12.5rem;
  font-family: inherit;
}
.form__input:focus {
  outline: none;
  /* kein rand mehr um das input feld drum, wenn man es anwählt */
}
.form__input::placeholder {
  color: transparent;
  /* Platzhalter soll nicht zu sehen sein, sobald man text eingibt */
  text-shadow: none;
}

.form__label {
  position: absolute;
  top: 0.125rem;
  left: 0;
  font-size: 1rem;
  margin: 0.75rem 1rem;
  color: #c87d27;
  text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
  transform-origin: 0% 50%;
  transform: scale(1) translate(0, 0);
  /* ursprungszustand */
  will-change: transform;
  transition: transform 0.25s ease-in-out;
}
.form__input:focus ~ .form__label, .form__input[placeholder]:not(:placeholder-shown) ~ .form__label {
  /* das & holt den selector von oben (.form__label) */
  transform: scale(0.75) translate(0.4rem, 2.7rem);
  /* verschiebt das label nach unten, unterhalb des Eingabefelds */
}

.form__radio-item-radio {
  display: inline-block;
  position: relative;
  padding-top: -0.125rem;
}

.form__radio-item-label {
  display: inline-block;
  padding-top: 0.1rem;
  padding-left: 0.25rem;
  color: #c87d27;
  font-size: 1rem;
  text-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
}

.form__radio-item-white .form__radio-item-radio {
  display: none;
}
.form__radio-item-white .form__radio-item-label::before {
  content: "";
  position: relative;
  display: inline-block;
  top: 0.25rem;
  width: 0.9em;
  height: 0.9em;
  border: 0.175rem solid white;
  border-radius: 100000px;
  margin-right: 0.5em;
  background-image: radial-gradient(circle at center center, white 47%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 0 0;
  /* wird hier also komplett ausgeblendet und erst in voller größe angezeigt, wenn der button gechecked ist */
  transition: background-size 0.2s ease-in-out;
  /* animation des buttons */
}
.form__radio-item-white .form__radio-item-radio:checked ~ .form__radio-item-label::before {
  background-size: 100% 100%;
}

/* lokale Variablen, auf die nicht von außen zugegriffen werden kann */
.introduction {
  margin-top: 3rem;
  padding-bottom: 5rem;
  /* hier stimmt was nicht ... zu viel Abstand nach unten zum Tours-Bereich */
}

.introduction__column-text {
  float: left;
  width: 33.33%;
  padding-right: 4.5rem;
  padding-top: 4rem;
}
@media (max-width: 75em) {
  .introduction__column-text {
    padding-top: 1rem;
    padding-right: 3rem;
  }
}
@media (max-width: 62em) {
  .introduction__column-text {
    padding-top: 0;
    padding-left: 0.8rem;
    width: 50%;
  }
}
@media (max-width: 48em) {
  .introduction__column-text {
    width: 100%;
    /* Text geht nicht über die volle Breite */
    float: none;
    /* verhindert die Überlappung der Bilder auf dem Text in der mobilen Ansicht */
    padding-bottom: 2rem;
    /* erzeugt in der Ausgabe einen kleinen Abstand zwischen Text- und Bildbereich */
  }
}

.introduction__text-heading {
  color: #26464d;
  font-weight: 500;
  font-size: 2rem;
}
.introduction__text-heading::before {
  content: "";
  display: block;
  width: 3rem;
  height: 0.25rem;
  background-color: #407682;
  margin-bottom: 0.5rem;
}
@media (max-width: 36em) {
  .introduction__text-heading {
    font-size: 1.8rem;
  }
}
@media (max-width: 25rem) {
  .introduction__text-heading {
    font-size: 1.6rem;
  }
}

.introduction__text {
  color: #26464d;
  margin-top: 0.2rem;
  font-size: 1.1rem;
}

.introduction__column-images {
  float: left;
  width: 66.66%;
  height: clamp(10rem, 35vw + 10rem, 36rem);
  /*Berechnung einer neuen festen Höhe der Bilder*/
  position: relative;
}
@media (max-width: 82em) {
  .introduction__column-images {
    height: clamp(10rem, 35vw + 10rem, 36rem);
    top: 3rem;
  }
}
@media (max-width: 62em) {
  .introduction__column-images {
    width: 50%;
    height: clamp(10rem, 25vw + 10rem, 36rem);
    /*Berechnung einer neuen festen Höhe der Bilder*/
    top: 3rem;
  }
}
@media (max-width: 48em) {
  .introduction__column-images {
    width: 80%;
    float: none;
    height: clamp(10rem, 40vw + 10rem, 36rem);
    /*Berechnung einer neuen festen Höhe der Bilder*/
    bottom: 2rem;
  }
}
@media (max-width: 36em) {
  .introduction__column-images {
    height: clamp(10rem, 45vw + 10rem, 36rem);
    top: -2rem;
    left: 2rem;
  }
}

/* Parameter top = Angabe in rem 
Parameter left = Angabe in% */
.introduction__image {
  width: 50%;
  position: absolute;
  box-shadow: 0 0 1rem black;
  box-sizing: content-box;
  filter: grayscale(50%);
  transform: scale(1);
  transition: filter ease-in-out 2s, transform ease-in-out 1s;
  /* border + padding = -0.66rem müssen von top und left abgezogen werden */
}
.introduction__image--first {
  width: 70;
  z-index: 1;
  top: 4rem;
  left: 35%;
}
.introduction__image--first:hover {
  top: 3.34rem;
  /* oben definierte neue Variable, die beide Parameter zusammenrechnet (0.33rem + 0.33rem) */
  left: calc(35% - 0.66rem);
  /* # = Wenn Variable innerhalb eines calc-Befehls verwendet wird */
}
.introduction__image--second {
  width: 50%;
  top: 5rem;
  left: 10%;
  z-index: 2;
  top: 11rem;
  left: 10%;
  /*sorgt für die richtige Positionierung beim Hovern über das Bild.*/
}
.introduction__image--second:hover {
  top: 10.34rem;
  /* oben definierte neue Variable, die beide Parameter zusammenrechnet (0.33rem + 0.33rem) */
  left: calc(10% - 0.66rem);
  /* # = Wenn Variable innerhalb eines calc-Befehls verwendet wird */
}
.introduction__image--third {
  width: 35%;
  top: 22rem;
  left: 60%;
  z-index: 3;
  top: 20rem;
  left: 30%;
}
.introduction__image--third:hover {
  top: 19.34rem;
  /* oben definierte neue Variable, die beide Parameter zusammenrechnet (0.33rem + 0.33rem) */
  left: calc(30% - 0.66rem);
  /* # = Wenn Variable innerhalb eines calc-Befehls verwendet wird */
}
@media (max-width: 62em) {
  .introduction__image--third {
    top: 16rem;
  }
}
@media (max-width: 36em) {
  .introduction__image--third {
    /* für den kleinen viewport (unter 576px) */
    top: 15rem;
  }
}
.introduction__image:hover {
  border: 0.33rem solid #c87d27;
  padding: 0.33rem;
  z-index: 10;
  /* holt jew. Bild beim drüberhovern in den Vordergrund */
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* lokale Variablen: nur in diesem Stylesheet */
.tours {
  background-color: #011820;
  position: relative;
  padding-bottom: 6rem;
}

.tours::after, .tours::before {
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  content: "tame the wild";
  text-transform: uppercase;
  color: #011820;
  font-size: min(11.1111111111vw, 10rem);
  /* wird vom Browser ausgewertet: Berechnet Schriftgröße auf Basis der Bildschirmbreite */
  font-weight: bold;
  text-shadow: 0 0 1px white;
  text-align: center;
  z-index: 0;
  overflow: hidden;
  /* für die Mobil-Ansicht */
  white-space: nowrap;
}

@supports (-webkit-text-stroke: 2px rgba(255, 255, 255, 0.2)) or (text-stroke: 2px rgba(255, 255, 255, 0.2)) {
  .tours::before {
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.2);
    text-stroke: 2px rgba(255, 255, 255, 0.2);
    text-shadow: none;
  }
}

@supports (-webkit-text-stroke: 2px transparent) or (text-stroke: 2px transparent) {
  .tours::after {
    -webkit-text-stroke: 2px transparent;
    text-stroke: 2px transparent;
    text-shadow: none;
  }
}

.tours__container {
  position: relative;
  z-index: 1;
  max-width: 75rem;
  /* orientiert sich an standardschriftgröße d. Browsers (breite geht nicht mehr über gesamte Breite */
  margin: 0px auto;
  /* setzt automatisch einen gleichen Abstand rechts und links (zentrieren) */
  padding: 0 2rem;
  /* Styles aus dem container.scss hier einbinden/referenzieren via include */
}
.tours__container::after {
  display: block;
  clear: both;
  content: "";
}
@media (max-width: 62em) {
  .tours__container {
    padding: 0 1rem;
  }
}

.tours__heading {
  color: white;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: 0.1em;
  text-align: center;
  padding-top: 4rem;
  padding-bottom: 1rem;
}

.tours__cards {
  display: flex;
  flex-wrap: wrap;
  /* Zeilenumbruch / Umbruch der Karten in der FlexBox erlauben */
  justify-content: space-around;
  /* erzeugt gleichmäßige Spalte/Whitespace zwischen den Karten */
}

.tours__card {
  flex: 0 0 20%;
  /* für alle 5 Karten dieselbe feste Größe/Breite vergeben, dürfen nicht schmaler werden. Rechnet CSS aus */
  position: relative;
  margin-top: 3rem;
  /* erzeugt Abstand über Karten, wenn diese beim Zoom in die zweite Reihe rutschen */
  height: 18rem;
  /* bei mir anders als im Beispiel */
  overflow: hidden;
  box-shadow: 0 0 1rem transparent;
  transform: scale(1);
  transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out, z-index 0.25s linear;
  z-index: 0;
}
@media (max-width: 75em) {
  .tours__card {
    flex: 0 0 14.2rem;
    /* damit stehen die Karten in der responsive version untereinander */
  }
}
.tours__card:hover {
  transform: scale(1.15);
  /* Karte soll sich beim Hover um 10% vergrößern */
  box-shadow: 0 0 1rem black;
  transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out, z-index 0s linear;
  z-index: 1000;
}

.tours__card-icon-background {
  background-color: #c87d27;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3rem;
  box-shadow: 0 0 0.125rem black;
  transform: translate(calc(-100% + 3rem), 0);
  /* reminder: wegen calc-Befehl = geschweifte Klammer + # */
  transition: transform 0.25s ease-in-out;
}
.tours__card:hover .tours__card-icon-background {
  /* verschachtelt: bezieht sich auf Hintergrund des Icons, der animiert werden soll */
  transform: translate(0, 0);
}

.tours__card-img {
  /* passt die Größe des Bildes an die Größe der card an */
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.tours__card-icon-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translate(0, 0);
  transition: transform 0.25s ease-in-out;
}
.tours__card:hover .tours__card-icon-container {
  transform: translate(calc(50% - 1.5rem), 0);
  /* geteilt durch 3 = die Hälfte der Höhe des Icons */
}

.tours__card-icon {
  height: 3rem;
  width: 3rem;
  color: white;
  display: block;
  filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.5));
}

.tours__card-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: white;
  padding: 0 1rem;
  text-shadow: 0 0 0.125rem black;
  background-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 60%);
  /* abdunkeln der Fotos: ab 20% des Bildes */
  transform: translate(0, calc(100% - 4rem));
  /* Verschieben des Textes nach unten und wieder nach oben = Umrechnung in px */
  transition: transform 0.25s ease-in-out;
  /* für den "weichen" Übergang */
}
.tours__card:hover .tours__card-content {
  transform: translate(0, 0);
  /* bezieht sich auf den Ausgangszustand */
}

.tours__card-heading {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  /* verhindert den Zeilenumbruch und generiert drei Punkte, falls Anzeigetext doch zu lang sein sollte */
  text-overflow: ellipsis;
  /* haben weiter oben zwar eine feste Größe vergeben. Dennoch hier ein Fallback falls der Browser den Font nicht anzeigen kann */
  overflow: hidden;
}

.tours__card-location {
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
  display: flex;
}

.tours__card-location-icon {
  font-size: 1.25rem;
}

.tours__card-location-text {
  line-height: 1.9rem;
  padding-left: 0.15rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tours__card-desc {
  font-size: 0.8rem;
  padding: 0.9rem 0;
  background-image: linear-gradient(90deg, #c87d27 60%, transparent 60%);
  /* für den horizontalen Strich */
  background-position-y: top;
  background-repeat: no-repeat;
  background-size: 100% 0.125rem;
}

.story {
  position: relative;
  overflow: hidden;
}

.story__video {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
}
@supports (object-fit: cover) and (object-position: center center) {
  .story__video {
    /* für eine gute Positionierung des Videos im responsive Design */
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

.story__video-colorize {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(1, 24, 32, 0.5);
  /* oben eingebundenes color-module; damit Transparenz anpassen */
}

/* umgerechnet in RGBA (Alphakanal) minus 50% der Deckkraft */
.story__container {
  position: relative;
  z-index: 2;
  /* liegt damit ÜBER dem Video */
  max-width: 75rem;
  /* orientiert sich an standardschriftgröße d. Browsers (breite geht nicht mehr über gesamte Breite */
  margin: 0px auto;
  /* setzt automatisch einen gleichen Abstand rechts und links (zentrieren) */
  padding: 0 2rem;
}
.story__container::after {
  display: block;
  clear: both;
  content: "";
}
@media (max-width: 62em) {
  .story__container {
    padding: 0 1rem;
  }
}

.story__heading {
  /*styles aus tours.scss: Könnte man auch in ein mixin auslagern */
  color: white;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: 0.1em;
  text-align: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  text-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.5);
}

.story__desc {
  max-width: 40rem;
  margin: 0 auto;
  color: white;
  column-count: 2;
  column-gap: 4rem;
  column-rule: 0.125rem solid rgba(225, 225, 225, 0.5);
  /* Strich hat eine leichte Transparenz */
  text-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.5);
  text-align: justify;
}
@media (max-width: 62em) {
  .story__desc {
    column-count: 2;
    text-align: justify;
  }
}
@media (max-width: 48em) {
  .story__desc {
    /* Text wird einspaltig */
    column-count: 1;
    text-align: justify;
  }
}

.story__book {
  text-align: center;
  padding: 3rem 0 4rem 0;
}

.initiale {
  font-size: 470%;
  font-weight: bold;
  float: left;
  margin: -0.3em 0.1em -0.4em;
}

/* damit stehen alle globalen Variablen und mixins zur Verfügung */
/* Modul einbinden */
/* Modul einbinden */
/* Variable für die unteren Berechnungen der border */
/* Abstand sowohl für den container als auch für die Karten darin */
/* definiert einen halben pixel */
.offers {
  background-color: #f0f0f0;
  min-height: 5rem;
}

.offers__container {
  display: flex;
  /* damit Karten nebeneinander angezeigt werden */
  flex-wrap: wrap;
  justify-content: center;
  /* letzte Karte wird mittig angezeigt (responsive design) */
  padding-top: 4rem;
  /* Abstände oben und unten */
  padding-bottom: 4rem;
  margin-left: -0.66rem;
  margin-right: -0.66rem;
  margin-top: -1.32rem;
  /* negatives margin, damit die oberen 2 karten etwas nach oben rutschen */
}

.offers__card-container {
  width: calc(33.3333333333% - 1.321rem);
  margin: 1.32rem 0.66rem 0 0.66rem;
}
@media (max-width: 62em) {
  .offers__card-container {
    width: calc(50% - 1.321rem);
  }
}
@media (max-width: 48em) {
  .offers__card-container {
    width: calc(100% - 1.321rem);
  }
}

.offers__card {
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  position: relative;
  /* Elternelement */
}

.offers__card-front {
  padding: 0 0 2rem 0;
  background-color: white;
  border-left: 0.0625rem solid rgba(0, 0, 0, 0.15);
  /* helleres grau für die überlappenden borders */
  border-right: 0.0625rem solid rgba(0, 0, 0, 0.15);
  border-top: 0.0625rem solid rgba(0, 0, 0, 0.15);
}

.offers__card-front::after {
  content: "";
  position: absolute;
  /* Kindelement von .offers__card */
  display: block;
  bottom: 0;
  left: -0.0625rem;
  /* mit dem negativen Vorzeichen überlappt der farbige border den grauen border (s.o.) der Karte um 1px */
  right: -0.0625rem;
  height: 0.75rem;
  background-color: #c87d27;
  border-left: 0.0625rem solid #bc9c77;
  /* Reduktion der Sättigung der farblichen border um 50% */
  border-right: 0.0625rem solid #bc9c77;
  /* und Aufhellung um 25% */
}

.offers__image-container {
  position: relative;
  background-color: #c87d27;
  margin-top: -0.0625rem;
  /* damit bild die karte minimal überlappt */
  margin-right: -0.0625rem;
  margin-left: -0.0625rem;
}

.offers__image-container::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  border-top: 0.0625rem solid rgba(0, 0, 0, 0.15);
  border-right: 0.0625rem solid rgba(0, 0, 0, 0.15);
  border-left: 0.0625rem solid rgba(0, 0, 0, 0.15);
}

.offers__image-container::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  right: 0;
  height: 4rem;
  background-image: linear-gradient(-5.7391704773deg, white 49.8%, transparent 50.2%);
  background-repeat: no-repeat;
  background-position: 50% 100%;
}
@media (max-width: 48em) {
  .offers__image-container::after {
    height: 5rem;
  }
}

.offers__image {
  /* bild soll über gesamte breite der karte gehen */
  width: 100%;
  filter: grayscale(70%);
  mix-blend-mode: multiply;
}

.offers__content {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.offers__content-heading {
  color: #26464d;
  font-size: 1.75rem;
  font-weight: 500;
  white-space: nowrap;
  /* verhindert Zeilenumbruch */
  overflow: hidden;
  /* zeigt ... an falls text zu lang sein sollte */
  text-overflow: ellipsis;
}

.offers__content-subheading {
  color: #c87d27;
  font-size: 1rem;
}

.offers__content-info {
  margin-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  /* leicht sichtbare graue border im inhaltsbereich */
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
  /* zeigt beide elemente nebeneinander an */
  background-image: linear-gradient(90deg, transparent calc(50% - 0.03125rem), rgba(0, 0, 0, 0.15) calc(50% - 0.03125rem), rgba(0, 0, 0, 0.15) calc(50% - 0.03125rem), transparent calc(50% + 0.03125rem));
  background-repeat: no-repeat;
  background-size: 100% 75%;
  /* strich geht nicht über die volle breite. konfigurieren, als wäre es ein bild */
  background-position: center center;
}

.offers__content-info-level, .offers__content-info-duration {
  /* positioniert die elemente innerhalb der flexbox. in bezug auf das elternelement (offers__content-info) */
  flex: 1 1 50%;
  color: #26464d;
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* ausgelagert, bzw. @extend setzt den jew selektor oben ein */
.offers__content-info-duration-text {
  padding-left: 0.33rem;
}

.offers__content-price-container {
  padding-top: 0.75rem;
  font-size: 1rem;
  color: #26464d;
}

.offers__content-price {
  display: block;
  color: #c87d27;
  font-weight: 500;
  font-size: 2rem;
  line-height: 0.9em;
}

.offers__card-hover {
  position: absolute;
  z-index: 2;
  /* und einen höheren z-index vergeben, damit der effekt "darüber" liegt */
  top: -0.0625rem;
  /* müssen den 1px hier wieder abziehen, damit border nicht durchscheint */
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  background-color: #c87d27;
  /* alpha-Variable unten verwendet (-dt) = zeigt Veränderung an */
  background-image: linear-gradient(90deg, transparent calc(50% - 0.03125rem), white calc(50% - 0.03125rem), white calc(50% + 0.03125rem), transparent calc(50% + 0.03125rem)), linear-gradient(135deg, #c87d27 0%, #a0641f 100%);
  /* mixin aufrufen */
  background-repeat: no-repeat, no-repeat;
  /* positioniert den Strich (nur oberhalb des buttons!) auf der Karte (Abstände zum Button) */
  background-position: center top, center center;
  background-size: 100% calc(50% - 4rem), 100% 100%;
  display: flex;
  /* positioniert den button mittig und zentriert auf der karte */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  /* weicherer übergang beim hover */
  transition: opacity 0.25s ease-in-out;
}
.offers__card:hover .offers__card-hover {
  opacity: 1;
}

.offers__card-container--flip {
  perspective: 50rem;
  /* 800 px */
  /* transform-style: preserve-3d klappt auch ... */
}
.offers__card-container--flip .offers__card {
  transition: transform 1s ease-in-out;
  /* geschmeidige Drehung der Karte */
  transform-style: preserve-3d;
  /* damit 3D-Effekt erhalten bleibt */
}
.offers__card-container--flip:hover .offers__card {
  transform: rotateY(180deg);
  /* Drehung der Karte um 180 Grad auf der Y-Achse beim Hover */
}
.offers__card-container--flip .offers__card-front {
  /* damit die Rückseite nicht durscheint */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(0deg);
  /* BUG! eig. ist das der default, aber hier nochmal explizit machen, das ist die vorderseite! */
}
.offers__card-container--flip .offers__card-hover {
  transform: rotateY(180deg);
  opacity: 1;
  /* Rückseite */
  -webkit-backface-visibility: hidden;
  /* damit die Vorderseite nicht durchscheint */
  backface-visibility: hidden;
}

.offers__card-container--3d-hover, .offers__card-container--3d {
  perspective: 50rem;
}
.offers__card-container--3d-hover .offers__card, .offers__card-container--3d .offers__card {
  transition: transform 0.5s ease-in-out;
  transform: rotateX(calc((var(--mouse-y, 0.5) - 0.5) * -20deg)) rotateY(calc((var(--mouse-x, 0.5) - 0.5) * 20deg));
}
.offers__card-container--3d-hover:hover .offers__card, .offers__card-container--3d:hover .offers__card {
  transition: transform 0.1s linear;
}

.offers__card-container--3d {
  /* haben wir oben definiert und mit allen nötigen CSS-Eigenschaften gefüllt */
  /* brauchen zusätzlich aber noch weitere Anweisungen */
}
.offers__card-container--3d .offers__card-hover {
  display: none;
}

.offers__card-container--3d-hover {
  /* s.o. Basic styles */
}
.offers__card-container--3d-hover .offers__card-front {
  transform-style: preserve-3d;
  /* BUG */
  filter: blur(0rem);
  transition: filter 0.5s ease-in-out;
  /* damit sich der Filter "sanft" anwendet, ohne harten Übergang */
}
.offers__card-container--3d-hover .offers__card {
  transform-style: preserve-3d;
  /* damit 3D-Effekt nicht verloren geht */
}
.offers__card-container--3d-hover .offers__card-hover {
  background-color: transparent;
  /* alpha-Variable unten verwendet (-dt) = zeigt Veränderung an */
  background-image: linear-gradient(90deg, transparent calc(50% - 0.03125rem), white calc(50% - 0.03125rem), white calc(50% + 0.03125rem), transparent calc(50% + 0.03125rem)), linear-gradient(135deg, rgba(200, 125, 39, 0.75) 0%, rgba(160, 100, 31, 0.75) 100%);
  /* mixin mit den background-image styles aufrufen + Transparenz einstellen */
  transform: translateZ(1rem);
}
.offers__card-container--3d-hover:hover .offers__card-front {
  filter: blur(0.5rem);
  /* Filter: zeigt Bild verschwommen an */
}

.gallery {
  padding-bottom: 3rem;
}

.gallery__container {
  max-width: 75rem;
  /* orientiert sich an standardschriftgröße d. Browsers (breite geht nicht mehr über gesamte Breite */
  margin: 0px auto;
  /* setzt automatisch einen gleichen Abstand rechts und links (zentrieren) */
  padding: 0 2rem;
}
.gallery__container::after {
  display: block;
  clear: both;
  content: "";
}
@media (max-width: 62em) {
  .gallery__container {
    padding: 0 1rem;
  }
}

.gallery__heading {
  color: #26464d;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: 0.1em;
  text-align: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.gallery__list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  /* Der gesamte Bereich wird auf 5 Spalten aufgeteilt */
  grid-template-rows: 15rem 15rem;
  /* SASS errechnet Breite & Höhe der Quadrate in den Zeilen */
}
@media (max-width: 75em) {
  .gallery__list {
    grid-template-rows: 13.5rem 13.5rem;
  }
}
@media (max-width: 62em) {
  .gallery__list {
    grid-template-rows: 12rem 12rem;
    /* Quadrate für Bilder im responsive design */
  }
}
@media (max-width: 48em) {
  .gallery__list {
    grid-template-rows: 7.5rem 7.5rem;
    /* Quadrate für Bilder im responsive design */
  }
}
@media (max-width: 36em) {
  .gallery__list {
    /* Quadrate für Bilder im responsive design */
    grid-template-columns: 1fr 1fr;
    /* das erste Bild groß, die anderen in 2 spalten darunter (Smartphone-Version) */
    grid-template-rows: 15rem 15rem 15rem 15rem 15rem;
  }
}

.gallery__list--checkbox-toggle {
  animation: gallery__list--checkbox-toggle-show 1s ease-in-out 0s 1;
}
.gallery__checkbox-toggle:not(:checked) ~ .gallery__list--checkbox-toggle {
  display: none;
}

@keyframes gallery__list--checkbox-toggle-show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.gallery__checkbox-toggle {
  /* soll man nicht sehen */
  display: none;
}

.gallery__more-button_container {
  /* button stylen */
  padding-top: 3rem;
  text-align: center;
}
.gallery__checkbox-toggle:checked ~ .gallery__more-button_container {
  /* wenn button "geklickt", erscheinen mehr Bilder und der button verschwindet */
  display: none;
}

.gallery__list-item {
  /* damit Abstände zw. Bildern verschwinden (vorher inline) */
  display: block;
  position: relative;
  filter: contrast(1.1) brightness(1.15) saturate(1.1);
  transform: scale(1);
  z-index: 0;
  /* normale Bildgröße. Vergrößert sich erst beim hover */
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0);
  transition: filter 0.2s ease-in-out, box-shadow 0.2s ease-in-out transform 0.2s ease-in-out, z-index 0.2s linear;
  /* hier soll der filter animiert werden */
  /* z-index animieren: solange über 1, ist das bild/element sichtbar und verschwindet nicht hinter den anderen */
}
.gallery__list-item::before {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
  /* hier die opacity. diaplay:none kann man nicht animieren! */
  background: radial-gradient(circle closest-corner, transparent 0, rgba(175, 105, 24, 0.4) 100%);
  content: "";
  mix-blend-mode: multiply;
}
.gallery__list-item:hover {
  box-shadow: 0 0 1rem black;
  transform: scale(1.1);
  z-index: 1000;
  transition: filter 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out, z-index 0s linear;
  /* z-index auf 0, damit Animation zw. Wechsel der Bilder schneller abläuft */
  filter: contrast(1) brightness(1) saturate(1);
}
.gallery__list-item:hover::before {
  opacity: 0;
}
.gallery__list-item--first {
  grid-column-start: 1;
  grid-column-end: span 2;
  /* das erste Bild soll 2 Spalten umfassen */
  grid-row-start: 1;
  grid-row-end: span 2;
  /* das erste Bild soll 2 Zeilen überspannen */
}
.gallery__list-item--last {
  grid-column-start: 4;
  grid-column-end: span 2;
  /* das letzte Bild soll 2 Spalten umfassen (ist jetzt hinten vom Grid) */
  grid-row-start: 1;
  grid-row-end: span 2;
}
@media (max-width: 36em) {
  .gallery__list-item--last {
    grid-column-start: 1;
    grid-column-end: span 2;
  }
}

.gallery__list-item-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__list-item-bg-image {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.about {
  background-color: #011820;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.about__slideshow {
  position: relative;
}

.about__img {
  width: 32rem;
  height: 32rem;
  object-fit: cover;
  float: left;
  border-radius: 10000000px;
  shape-outside: circle(50% at 50% 50%);
  margin-right: 2rem;
}
@media (max-width: 75em) {
  .about__img {
    width: 28.8rem;
    height: 28.8rem;
  }
}
@media (max-width: 62em) {
  .about__img {
    width: 25.6rem;
    height: 25.6rem;
  }
}
@media (max-width: 48em) {
  .about__img {
    width: 12.8rem;
    height: 12.8rem;
  }
}
@media (max-width: 36em) {
  .about__img {
    width: 9.6rem;
    height: 9.6rem;
  }
}

.about__img--slideshow {
  position: absolute;
  top: 0;
  left: 0;
}

.about__img--slideshow-4 {
  animation-name: animation-about__img--slideshow-4;
  animation-timing-function: ease-in-out;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes animation-about__img--slideshow-4 {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
    /* wie lange soll das Bild noch sichtbar sein (sec) */
  }
  /* Animation dauert insg. 10 sekunden) */
  25% {
    opacity: 0;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.about__img--slideshow-3 {
  animation-name: animation-about__img--slideshow-3;
  animation-timing-function: ease-in-out;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes animation-about__img--slideshow-3 {
  0% {
    opacity: 1;
  }
  45% {
    /* wie lange soll das Bild noch sichtbar sein (sec) */
    opacity: 1;
    /* Animation dauert insg. 10 sekunden) */
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.about__img--slideshow-2 {
  animation-name: animation-about__img--slideshow-2;
  animation-timing-function: ease-in-out;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes animation-about__img--slideshow-2 {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.about__heading {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: 0.1em;
  color: #c87d27;
}
@media (max-width: 36em) {
  .about__heading {
    font-size: 1.5rem;
  }
}
@media (max-width: 25rem) {
  .about__heading {
    font-size: 1.3rem;
  }
}

.about__text {
  padding-top: 2.5rem;
  color: white;
}
.about__text::before {
  content: "";
  height: 0.25rem;
  width: 4rem;
  display: inline-block;
  margin-left: 1rem;
  background-color: #c87d27;
}
@media (max-width: 75em) {
  .about__text {
    padding-top: 0.5rem;
  }
}

.about__para {
  font-weight: 300;
  margin-bottom: 1rem;
}

.about__quote {
  font-style: italic;
}
.about__quote::before {
  content: "„";
}
.about__quote::after {
  content: "“";
}

.booking-modal {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 20000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
}
.booking-modal:target {
  display: flex;
}
.booking-modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.85);
  animation-name: booking-modal--fade-in;
  /* animation innerhalb des before-Elements läuft erst ab, wenn das target aktiviert wird */
  animation-duration: 1s;
  /* ist via display:none (s.o.) eigentlich nicht da. erst, wenn "book now" gedrückt wird */
  animation-timing-function: ease-in-out;
  /* dann faded das modal inkl. hintergrund ein */
  animation-delay: 0s;
  animation-iteration-count: 1;
}
@supports (backdrop-filter: blur(4rem)) {
  .booking-modal::before {
    /* für einen verschwommenen hintergrund (nur in chrome!) */
    background-color: rgba(0, 0, 0, 0.15);
    /* im FF muss die hintergrundfarbe kräftig dunkel sein, damit effekt gut zur geltung kommt */
    backdrop-filter: blur(4rem);
    /* via @supports den browser fragen, ob er diese eigenschaft unterstützt */
  }
}

@keyframes booking-modal--fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.booking-modal__content {
  position: relative;
  width: 45rem;
  height: 23rem;
  max-width: 100vw;
  /* werte für die smartphone version verkleinern/limitieren */
  max-height: 100vh;
  overflow: auto;
  /* scrollbalken */
  border-radius: 0.25rem;
  padding-left: calc(min(100vw, 45rem) * 0.375);
  background-image: linear-gradient(95.7391704773deg, transparent 33%, rgba(64, 118, 130, 0.85) 33.15%), linear-gradient(90deg, transparent 33%, rgba(255, 255, 255, 0.5) 100%), url("../images/modal/altenberger_dom_5.jpg");
  /* Pfad nur einmal hoch, datei muss relativ zum main.css sein! */
  background-color: #7f7f7f;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, cover;
  background-position: center center, center center, center 30%;
  box-shadow: 0 0 1rem black;
  animation-name: booking-modal__content--fade-in;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: backwards;
}
@media (max-width: 36em) {
  .booking-modal__content {
    /* anpassung smartphone-version */
    height: 29rem;
    padding-left: 1rem;
    background-image: none;
    background-color: #407682;
  }
}
@media (max-width: 25rem) {
  .booking-modal__content {
    height: 29rem;
  }
}
@keyframes booking-modal__content--fade-in {
  /* verschiebung des modals via translate */
  0% {
    /* wird animiert (s.o.) aufgreifen des namens der animation */
    transform: translate(0, calc(-50vh - 50%));
    /* 50vh = bezieht sich auf die hälfte der höhe des content-bereichs vom modal */
  }
  100% {
    transform: translate(0, 0);
  }
}

.booking-modal__close {
  display: block;
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 1.25rem;
  height: 1.25rem;
  color: transparent;
  border-radius: 100000px;
  background-image: linear-gradient(-45deg, transparent 44%, #c87d27 45%, #c87d27 55%, transparent 56%), linear-gradient(45deg, transparent 44%, #c87d27 44%, #c87d27 55%, transparent 56%);
}
.booking-modal__close:hover {
  opacity: 0.8;
}

.booking-modal__heading {
  color: white;
  font-size: 1.5rem;
  font-weight: 500;
  padding-top: 3rem;
  margin-bottom: 0.35rem;
  text-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
}

.booking-modal__submit-container {
  text-align: right;
  margin-right: 1rem;
  margin-top: 1rem;
}

.booking-modal__paragraph {
  font-weight: 250;
  margin-bottom: 1rem;
  text-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
}
@media (max-width: 36em) {
  .booking-modal__paragraph {
    /* Abstand zwischen der Unterschrift im RD */
    margin: 2rem 0 2rem 0;
  }
}

@media (max-width: 36em) {
  .form__group {
    /* Abstand zwischen Eingabefeldern im RD */
    margin-bottom: 0.8rem;
  }
}

/*# sourceMappingURL=main.css.map */