/* === Allgemein ===*/

/* Schriften */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat/Montserrat-VariableFont_wght.ttf");
}
@font-face {
  font-family: "Oleo Script Swash Caps";
  src: url("fonts/Oleo_Script_Swash_Caps/OleoScriptSwashCaps-Regular.ttf");
}

body,
p {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  background-color: #ddd7eb;
}

.bg_blau {
  background-color: #121376;
}

.text_white {
  color: #ddd7eb;
}

.text_red {
  color: red;
}

.small-sup {
  font-size: 0.5em;
}

.large-text {
  font-size: 7em;
}

.inline {
  display: inline;
}

.text-shadow {
  /* text-shadow: 2px 2px 4px #000000; */
  text-shadow: 4px 4px 8px #000000;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-alt {
  font-family: "Montserrat", sans-serif;
}

.img-max-height {
  max-height: 20vh;
  object-fit: contain;
}

/* Button */

.btn-round {
  border-radius: 30px;
}

/* Farben */

.bg-overlay {
  height: 100%;
  width: 100%;
  background-color: rgba(51, 51, 51, 0.9);
  position: absolute;
  top: 0;
}

a .text-white:hover,
a.text-white:hover {
  color: #dc3545 !important;
  text-decoration: none;
}

/* Section */

section {
  padding: 140px 0;
}

/* Hilfsklassen */

.d-relative {
  position: relative;
}

/* === Navigation ===*/

nav.navbar.navbar-dark button:hover,
nav.navbar.navbar-dark button:focus,
nav.navbar.navbar-dark .nav-link:hover {
  color: #dc3545;
}

.navbar-nav .badge {
  position: absolute;
  left: 25px;
  bottom: 25px;
  padding-right: 0.5em;
  padding-left: 0.5em;
}

.navbar-nav .icon-basket {
  line-height: 0.8;
  font-size: 1.5em;
}

/* === Hero ===*/

.hero-bg {
  background: url("images/bg-hero.jpg") 50% 0 fixed no-repeat;
  height: 100vh;
  background-size: cover;
}

#Start .container {
  height: 100%;
}

#Start .row {
  height: 80%;
}

/* === Sektion1 ===*/

.img-bg {
  position: absolute;
  overflow: hidden;
  right: 0px;
  bottom: 0;
  width: 50vw;
}

.bg-Sektion2 {
  background: url("images/swimming-pool-1665669_1920.jpg") 50% 0 fixed no-repeat;
  height: 100vh;
  background-size: cover;
}

/* === Footer ===*/

.bg-black {
  background-color: #333;
}

/* === Back to Top Button ===*/
#back-to-top-button {
  display: none;
  position: fixed;
  right: 40px;
  bottom: 40px;
  color: #ccc;
  border-color: #ccc;
}