@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap');

:root {
  --radius: 0px;
  --radius-fieldset: 0px;
  --font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  --outline: 1px solid grey;
  --font-color: #546C8C; /* #2e3501; */
  --bg-color: #8f966e; /* #2e3501; */
  --bg-color-fieldset: #546C8C; /* #546C8C; */
}


.bg-primary {
  background-color: var(--bg-color) !important;
}

.bg-fieldset {
  background-color: var(--bg-color-fieldset);
}

body {
  background-color: var(--body-color);
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}



.titel {
  font-family: 'Courgette', cursive;
  background-image: radial-gradient(rgba(96, 132, 206, 1.0) 30%, rgba(255, 255, 255, 0.0) 75%); /* #6084ce */
  color: white;
  width: 330px;
  margin: auto 50px auto auto;
  text-align: center;
  padding: 5px 0;
}

h3 {
  font-family: var(--font-family);
  margin-top: 15px;
  padding-bottom: 10px;
  color: var(--font-color);
}

.container {
  padding:0;
}

.container .row {
  margin: 0 0;
}

footer {
  padding-top: 10px !important;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

nav {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.navbar-dark a,.navbar-toggler {
  color: white !important;
  border-color: white !important;
}

.navbar-dark a:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
}


.jumbotron {
    background-image: url('images/säntis-klein.jpg');
    background-size: cover;
    height: 400px;
    margin-bottom: 0;
    padding: 2rem 1rem !important;
  }

/* Damit die Überschrift unter der Navigation ist */
section {
  padding: 25px 0;
}

hr {
  border-color: rgba(0,0,0,0.6);
}

section:last-of-type {
  padding-bottom: 200px;
}

.responsive-map {
  height: 0;
  overflow: hidden;
  padding-bottom: 450px;
  position: relative;
  }

  .responsive-map iframe {
    height: 100%;
    width: 100%;
    left: 0;
    position: absolute;
    border: var(--outline);
    }

img.portrait {
  width:200px;
  height:200px;
  object-fit:cover;
  border-radius: 50%;
  border: var(--outline);
}

.modal-header {
  color: white;
}

.modal-header .close {
  color: white;
  opacity: 1.0;
}

.zertifikat img {
  width: 80px;
  height: 80px;
}

.zertifikat img.livingsense {
  height: 80px;
  width: auto;
}

.zertifikat p {
  font-size: 10px;
  padding-top: 10px;
}

.seperate+.seperate:before {
  content:" | ";
}

.modal-header {
  color: white;
  background-color: var(--bg-color);
}

.modal-header .close {
  color: white;
  opacity: 1.0;
}

html,body {
  height: 100%;
}

.fixed-bg {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100%; 
  width: 100%;
  color: white;
  text-align: center;
  display: table;
}
.fixed-bg div {
  vertical-align: bottom  ;
  color: white;
  background-color: rgba(84, 108, 140, 0.8);
  padding: 5px 10px;
  margin: 300px 0 0 0;
}


.scroll-bg {

}

.bg-1 {
  background-image: url('https://cdn.pixabay.com/photo/2021/07/12/05/02/mazarine-blue-6405362_960_720.jpg');
}

.bg-2 {
  background-image: url('https://images.unsplash.com/photo-1470137430626-983a37b8ea46?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1650&q=80');
}

.bg-agb {
  background-image: url('https://images.unsplash.com/photo-1501555088652-021faa106b9b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1953&q=80');
}

.bg-praxis {
  background-image: url('https://images.unsplash.com/photo-1501771924607-209f42a6e7e4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1651&q=80');
}

.bg-kontakt {
  background-image: url('https://images.unsplash.com/photo-1566849787933-0bab0fafa2a4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80');
}

footer a:link, footer a:hover, afooter :visited, footer a:active {
  color: white;
}