/***

Theme Name:    Creating Spaces
Author:        Webdachs
Author URI:    https://webdachs.dev
Description:
Keywords:      1-column, responsive, mobile-friendly, Bootstrap, Hero Image, Carousel, Footer
Version:       0.1

***/


/*** TABLE OF CONTENT

    1    General formatting
    1.1  Colors
    1.2  Animations
    2    Font Awesome
    3    Above the fold
    3.1  Navbar
    3.2  Skip to content button
    3.3  Hero Section
    4    Section styling
    4.1  General section styling
    4.2  Vorteile
    4.3  Ausstattung
    4.4  C2A M/Training
    4.5  Preise
    4.6  Kontakt
    4.7  Footer


    END TABLE OF CONTENT ***/

/*** 1 General formatting */

html, body {
  height: 100%;
}

body {
  position: relative;
}

p {
  line-height: 1.6;
}

/*** 1.1 Colors ***/

:root {
  --wd-primary-color: #e86240;
  --wd-secondary-color: #cb2725;
  --wd-accent-color: #BD2626;
}

h1, h2, h3, .wd-icons::before {
  color: var(--wd-primary-color);
  opacity: 0.85;
}

main a:not(.btn),
main a:visited:not(.btn),
.text-highlight,
footer .modal a,
footer .modal a:visited {
  color: var(--wd-primary-color);
}

.btn-info {
  background-color: var(--wd-primary-color);
  border-color: var(--wd-primary-color);
}

footer a,
footer a:visited {
  color: #fff;
  text-decoration: none;
}

footer li a:hover,
footer a:focus {
  color:  lightgrey;
}






i.fa-check,
i.fa-toggle-on {
  color: var(--wd-primary-color);
}

p, main li, main table td {
  opacity: 0.85;
}

/*** 2 Font Awesome ***/


li.wd-icons {
  /* margin-left: 25px; */
  /* border: none; */
  padding-left: 50px;

}

td > i.fas {
  margin-right: 15px;
}

li.wd-solid-icons::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  margin-left: -50px;
  /* color: var(--wd-primary-color); */
  font-size: 18px;
  text-align: center;
  line-height: 1.5;

}

/* li.wd-brand-icons::before {
  font-family: "Font Awesome 5 Brands";
  font-size: 36px;
  margin-left: -75px;
  margin-top: -5px;
  position: absolute;
} */

.wd-icon-teaching::before {
  content: "\f51c";
}

.wd-icon-wifi::before {
  content: "\f1eb";
}

.wd-icon-blender::before {
  content: "\f517";
}

.wd-icon-sink::before {
  content: "\e06d";
}

.wd-icon-volume-mute::before {
  content: "\f6a9";
}

.wd-icon-sunshade::before {
  content: "\f5ca";
}

.wd-icon-mountain::before {
  content: "\f6fc";
}

.wd-icon-cutlery::before {
  content: "\f2e7";
}

.wd-icon-printer::before {
  content: "\f02f";
}

.wd-icon-beamer::before {
  content: "\f03d";
}

.wd-icon-paper::before {
  content: "\f0c5";
}

.wd-icon-option::before {
  content: "\f14a";
}

/*** 3 Above the fold ***/

/* 3.1 Navbar */

@media (min-width: 992px) {
  ul.navbar-nav > li {
    margin-right: 20px;
  }

  .navbar-dark .nav-item .nav-link {
    /* opacity: 1.0; */
    color: #ffffff;
  }

  .nav-item .active {
    border-bottom: 5px solid #ffffff;
    background-color: var(--wd-primary-color);
    margin-top: -9px;
    margin-bottom: -22px;
    padding-top: 17px;
    padding-bottom: 12px;
  }

  .nav-item:hover {
    animation-name: navItemHover;
    animation-duration: .2s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
  }

  @keyframes navItemHover {
    0% {
      border-bottom: none;
    }

    100% {
      border-bottom: 5px solid #ffffff;
      margin-bottom: -9px;
    }
  }
}

nav.navbar {
  animation-name: navSlideDown;
  animation-duration: 0.75s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes navSlideDown {
  0% { transform: translate(0, -60px); }
  100% { transform: translate(0, 0); }
}

.card-title a:hover,
.card-title a:focus {
  animation-name: linkHover;
  animation-duration: .2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes linkHover {
  0% { color: var(--wd-primary-color); }
  100% { color: var(--wd-secondary-color); }
}

@media (max-width: 991px) {

  ul.navbar-nav {
    margin: 20px 0;
  }

  ul.navbar-nav > li {
    text-align: center;
    padding: 5px 0;
    font-size: 1.2rem;
  }

  .nav-item .active {
    background-color: var(--wd-primary-color);
    /* border-bottom: 1px solid #ffffff; */
  }
}

/* 3.2 Skip to content button */

.skip-to-content {
  position: absolute !important;
  z-index: 5;
  transform: translate(10px, -100%);
  transition: transform .2s;
}

.skip-to-content:focus {
  transform: translate(10px, 75px);
}

/* 3.3 Hero Carousel */

#hero-carousel, .carousel-inner {
  width: auto;
  max-height: 100vh;
  border-bottom: 5px solid var(--wd-primary-color);
} /* TODO: Navbar verdeckt auf kleinen Geräten zu viel vom Bild. */

.carousel-overlay {
  position: absolute;
  z-index: 5;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -60%);
  text-align: center;
}

.carousel-overlay h1 {
  font-size: 1.1em;
}

.carousel-overlay p {
  font-size: 0.9em;
  opacity: 0.85;
}

@media (min-width: 768px) {

  .carousel-overlay {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .carousel-overlay h1 {
    font-size: 2em;
  }

  .carousel-overlay p {
    font-size: 1.5em;
  }
}

@media (min-width: 992px) {
  .carousel-overlay h1 {
    font-size: 2.5em;
  }

  .carousel-overlay p {
    font-size: 2em;
  }
}

/*** 4 Section Styling ***/

/* 4.1 General Section Styling */

section#vorteile,
section#ausstattung,
section#preise,
section#kontakt,
section#c2a-mtraining {
  margin: 5em 0;
}

/*** 4.3 Ausstattung ***/

.mcws-gallery {
  margin: 3em auto;
}

.amenities-description p {
  line-height: 2em;
}

@media (max-width: 768px) {
  .amenities-description p {
    line-height: inherit;
  }
}

/* 4.4 C2A M/Training */

#c2a-mtraining {
  /* background-color: var(--wd-primary-color); */
  color: #fff;
  min-height: 50vh; /* Wird benötigt, damit .c2a-bg-img angezeigt wird, auch wenn nur ein Hintergrundbild vorhanden ist. */
}

@media (min-width: 768px) {
  #c2a-mtraining p {
    line-height: 2;
  }
}

section#c2a-mtraining h2,
section#c2a-mtraining a,
section#c2a-mtraining a:visited {
  color: #fff;
}

/* Bisschen umständlich, stellt aber den Call to Action auf height < 900px und größeren Auflösungen ähnlich dar. */

.c2a-bg-img {
  min-height: 50vh;
  border-bottom: 10px solid var(--wd-primary-color);
  background-image: url('../../images/c2a/mtraining-projektmanagement-lg.jpg');
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top right;
}

@media (min-width: 992px) {
  .c2a-bg-img {
    border: none;
    min-height: 80vh;
    background-position: right;
  }
}

@media (min-width: 1100px) {
  .c2a-bg-img {
    min-height: 70vh;
  }
}

@media (min-width: 1200px) {
  .c2a-bg-img {
    min-height: 65vh;
  }
}

@media (min-width: 1250px) {
  .c2a-bg-img {
    min-height: 60vh;
  }
}

@media (min-width: 1300px) {
  .c2a-bg-img {
    min-height: 55vh;
  }
}

@media (min-width: 1400px) {
  .c2a-bg-img {
    /* min-height: 60vh; */
    max-width: 60vh;
  }

  .c2a-text {
    max-width: 80vh;
  }
}

@media (max-height: 900px) AND (orientation: landscape) {

  #c2a-mtraining p {
    line-height: 1.6;
  }

  @media (min-width: 992px) {
    .c2a-bg-img {
      border: none;
      min-height: 85vh;
    }
  }

  @media (min-width: 1050px) {
    .c2a-bg-img {
      min-height: 80vh;
    }
  }

  @media (min-width: 1100px) {
    .c2a-bg-img {
      min-height: 75vh;
    }
  }

  @media (min-width: 1150px) {
    .c2a-bg-img {
      min-height: 70vh;
    }
  }

  @media (min-width: 1200px) {
    .c2a-bg-img {
      min-height: 65vh;
    }
  }
}

.c2a-text {
  background-color: var(--wd-primary-color);
}


/* 4.5 Preise */

.price-highlight {
  color: var(--wd-primary-color);
  font-weight: bold;
  opacity: 0.85;
  font-size: 2em;
}
#preise th {
  background-color: var(--wd-primary-color);
  color: #fff;
}

.contact-details p {
  line-height: 2em;
}

@media (max-width: 768px) {
  .contact-details p {
    line-height: inherit;
  }
}



/*** 4.6 Kontakt ***/

.more-space { /* Später rauswerfen */
  padding: 5rem 0 2rem 0;
}

/*** 4.7 Footer ***/