/* --- ALLGEMEIN --- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  height: 100%;
  width: 100%;

  overflow-y: scroll;
  scroll-behavior: smooth;
}

header {
  z-index: 1000;
}

body {
  font-family: "Noto Sans HK", "Lucida Sans", "Lucida Sans Regular",
    "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-weight: 300;
  color: white;
  font-size: 1rem;
  line-height: 1.5rem;

  min-height: 100%;
  width: 100%;

  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "hd"
    "main"
    "ft";

  /* background-color: orangered; */
}

h1 {
  font-size: 2.5rem;
  font-family: "Bree Serif", Georgia, "Times New Roman", Times, serif;
  line-height: 3.5rem;
  padding: 8rem 0 0;

  /* background-color: orange; */
}

p,
ul {
  margin: 2rem 0;
  list-style-position: inside;
}

/* Button */

button {
  font-family: "Noto Sans HK", "Lucida Sans", "Lucida Sans Regular",
    "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 500;
}

.container-linkbutton {
  display: flex;
  align-items: center;
  justify-content: center;
}

.linkbutton {
  margin: 2rem;
  padding: 0.5rem 2rem;
  background-color: white;
  color: rgb(0, 159, 227);
  border: 2px solid rgb(0, 159, 227);


  transition: all 0.25s ease-in-out;
}

.linkbutton:hover {
  background-color: rgb(0, 159, 227);
  color: white;
  border: 2px solid rgb(0, 159, 227);
  box-shadow: 1px 1px 10px rgb(70, 70, 70, 80%);
  cursor: pointer;
}

/* Einfache Links */

.link {
  color: rgb(0, 159, 227);
  text-decoration: none;
}

.link:hover {
  color: rgb(230, 0, 126);
}

.link:active {
  color: rgb(145, 0, 80);
}

.link:visited {
  color: rgb(0, 100, 143);
}

/* E-Mail u. Telefonnummern */

.mail,
.tel {
  color: rgb(0, 159, 227);
  font-weight: 400;
  text-decoration: none;
}

.mail:hover,
.tel:hover {
  color: rgb(230, 0, 126);
}

.mail:active,
.tel:active {
  color: rgb(145, 0, 80);
}

.mail:visited,
.tel:visited {
  color: rgb(0, 100, 143);
}

/* --- KOPF --- */

header {
  grid-area: hd;

  display: flex;

  /* background-color: yellowgreen; */
}

.main-nav {
  width: 100%; /* Notwendig für flexbox */

  background-color: black;
  box-shadow: 0 2px 10px rgb(70, 70, 70, 80%);

  font-family: "Bree Serif", Georgia, "Times New Roman", Times, serif;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;

  /* background-color: green; */
}

.logo {
  display: block;
  width: 150px;
  height: 140px;
  background-color: black;
  /* margin: 1rem; */

  background: url("../images/Logo_white.png") no-repeat;
  background-size: contain;
  background-position: top;

  position: absolute;
  top: 3rem;
  left: 10%;

  transition: all 0.9s ease-in-out 0.1s;

  /* background-color: yellow; */
}

.logo:hover {
  transform: rotate(360deg);
  background: url("../images/Logo_black.png") no-repeat;
  background-size: contain;
  background-position: top;
}

/* Main Navigation */

.main-nav__list {
  list-style: none;
  margin: 5rem 2.5% 1.25rem;

  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;

  display: none;

  /* background-color: yellowgreen; */
}

.main-nav__link {
  font-size: 1.6rem;
  font-weight: bold;
  padding: 2rem 2rem 0;
  text-decoration: none;
  color: white;
  border: transparent solid 3px; /* Kein "Ruckeln" des Menüs */

  transition: color 0.4s ease-in-out;

  /* background-color: rgb(0, 99, 99); */
}

.main-nav__link:hover {
  color: rgb(230, 0, 126);
  border: rgb(230, 0, 126) solid 3px;
}

.main-nav__link:active {
  color: rgb(145, 0, 80);
  border: rgb(145, 0, 80) solid 3px;
}

/* Aktiven Menüpunkt hervorheben */

#aktiv {
  padding: 2rem 2rem 0;
  background-color: rgb(145, 0, 80);
  border: rgb(145, 0, 80) solid 3px;
}

#aktiv:hover {
  color: white;
  cursor: default;
}

#aktiv-ft {
  color: rgb(0, 159, 227);
}

/* Mobile Navigation */

.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 80vw;

  text-align: center; /* Zum Zentrieren des Logos */
  font-family: "Bree Serif", Georgia, "Times New Roman", Times, serif;

  display: none;

  z-index: 200 !important;

  overflow-y: auto;

  background-color: black;
  box-shadow: 5px 0px 10px rgb(70, 70, 70, 50%);
}

.mobile-nav__logo {
  height: auto;
  width: 150px;

  text-align: left; /* Zum Zentrieren des Logos */
  margin: 3rem auto 0; /* --"-- */

  /* background-color: cadetblue; */
}

.mobile-nav__list {
  list-style: none;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: auto;
  flex-wrap: wrap;

  /* background-color: yellow; */
}

.mobile-nav__item {
  margin: 1rem 0;
  padding: 2rem 2rem 0;
  text-align: center;

  /* background-color: darksalmon; */
}

.mobile-nav__link {
  font-size: 1.4rem;
  font-weight: bold;
  padding: 2rem 1rem 0;
  text-decoration: none;
  color: white;

  transition: color 0.4s ease-in-out;

  /* background-color: lightgreen; */
}

.mobile-nav__link:hover {
  color: rgb(0, 159, 227);
  border: 3px solid rgb(0, 159, 227);
}

.mobile-nav__link:active {
  color: rgb(0, 100, 143);
  border: 3px solid rgb(0, 100, 143);
}

#mobile-nav__kontakt {
  padding: 2rem 1rem 4rem;

  /* background-color: yellow; */
}

/* Toggle-Button */

.togglebutton {
  width: 3rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin: 2rem;
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;

  transition: all 0.5s ease-in-out;
}

.togglebutton:focus-visible,
a:focus-visible,
button:focus-visible { outline: 3px solid rgb(0, 159, 227); outline-offset: 3px; }

.togglebutton__line {
  width: 100%;
  height: 0.2rem;
  background-color: white;
  display: block; /* Inline-Element in ein Block-Element */
  margin: 0.6rem 0;
}

.togglebutton:hover {
  background-color: rgb(0, 159, 227);
  border-left: 5px solid rgb(0, 159, 227);
  border-right: 5px solid rgb(0, 159, 227);
  border-radius: 5px;
}

.togglebutton:active {
  background-color: rgb(0, 100, 143);
  border-left: 5px solid rgb(0, 100, 143);
  border-right: 5px solid rgb(0, 100, 143);
  border-radius: 5px;
}

/* Backdrop */

.backdrop {
  display: none;

  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.5);

  z-index: 120 !important;
}

/* --- MITTE --- */

main {
  grid-area: main;
}


/* --- FUSS --- */

.footer {
  display: flex;

  /* position: -webkit-sticky;
    position: sticky; */
  /* bottom: 0; */

  /* background-color: yellow; */
}

.footer-nav {
  background-color: black;
  box-shadow: 10px 0 15px rgb(70, 70, 70, 80%);
  font-family: "Bree Serif", Georgia, "Times New Roman", Times, serif;
  list-style: none;
  height: auto;
  margin: 0;
  padding: 1rem 2.5%;

  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;

  /* background-color: yellowgreen; */
}

.footer-nav__link {
  text-decoration: none;
  color: white;

  padding: 0 2rem;

  /* background-color: orange; */
}

.footer-nav__link:hover {
  color: rgb(0, 159, 227);
}

.footer-nav__link:active {
  color: rgb(0, 100, 143);
}

/* --- MEDIA QUERIES --- */

/* Smartphones S - Bis zu einer Breite des Viewports von 400px ... wie oben angeführt */

/* Größer als Smartphones S (FÜR ALLES FOLGENDE) - Ab einer Breite des Viewports von 400px  ... */
@media screen and (min-width: 25rem) {
    h1 {
      font-size: 3rem;
      padding: 5rem 0 0;
    }

    .mobile-nav__link {
      font-size: 2rem;
    }

    .mobile-nav__logo {
      height: auto;
      width: 200px;
    }    
}

/* Tablet - Ab Viewportbreite von 640px bis 992px... */
@media screen and (min-width: 40rem) and (max-width: 61.99rem) {

  .logo {
  display: block;
    width: 170px;
    height: 159px;
    background-color: black;
    /* margin: 1rem; */

    background: url("../images/Logo_white.png") no-repeat;
    background-size: contain;
    background-position: top;

    position: absolute;
    top: 3rem;
    left: 10%;

    transition: all 0.9s ease-in-out 0.1s;

    /* background-color: yellow; */
  }

  .logo:hover {
    transform: rotate(360deg);
    background: url("../images/Logo_black.png") no-repeat;
    background-size: contain;
    background-position: top;
  }
}

/* Hier (FÜR ALLES FOLGENDE) spätestens ins Hamburger-Menü wechseln, damit Logo nicht Text überlappt */
@media screen and (min-width: 70rem) {
  header {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
  }

  .main-nav__list {
    display: flex;
  }

  .togglebutton {
    display: none;
  }

  .logo:hover {
    transform: rotate(360deg);
    background: url("../images/Logo_black.png") no-repeat;
    background-size: contain;
    background-position: top;
  }
}

/* Desktop - Ab Viewportbreite von 992px bis 1200px... */
@media screen and (min-width: 62rem) and (max-width: 74.99rem) {

  .logo {
  display: block;
    width: 200px;
    height: 186px;
    background-color: black;
    /* margin: 1rem; */

    background: url("../images/Logo_white.png") no-repeat;
    background-size: contain;
    background-position: top;

    position: absolute;
    top: 3rem;
    left: 10%;

    transition: all 0.9s ease-in-out 0.1s;

    /* background-color: yellow; */
  }
}

/* Widescreen - Ab einer Viewportbreite von 1200px ... */
@media screen and (min-width: 75rem) {

  .main-nav__list {
    display: inline-flex;
    margin: 5rem 10% 1.25rem;
  }

  .main-nav__link {
    font-size: 1.75rem;
  }

  .headline {
    font-size: 3.25rem;
  }

  p {
    padding: 0 50% 0 auto;
  }

  .logo {
  display: block;
    width: 220px;
    height: 205px;
    background-color: black;
    /* margin: 1rem; */

    background: url("../images/Logo_white.png") no-repeat;
    background-size: contain;
    background-position: top;

    position: absolute;
    top: 3rem;
    left: 10%;

    transition: all 0.9s ease-in-out 0.1s;

    /* background-color: yellow; */
  }

  #main-einleitung {
    max-width: 90%;
  }

  .footer-nav {
    padding: 1rem 10%;
  }
}

/* Widescreen - noch größer ... */
@media screen and (min-width: 80rem) {

  #main-einleitung {
    max-width: 60%;
  }
}


/* Modernisierung / Barrierefreiheit */
.mobile-nav.is-open, .backdrop.is-open { display: block; }
body.menu-open { overflow: hidden; }
.linkbutton { display: inline-block; text-decoration: none; white-space: nowrap; font-family: "Noto Sans HK", sans-serif; font-size: 1rem; font-weight: 500; }
footer { grid-area: ft; }
img { max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}