@font-face {
  font-family: caveat;
  src: url("../fonts/Caveat-Regular.ttf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: caveat;
  src: url("../fonts/Caveat-Bold.ttf");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: neuton;
  src: url("../fonts/Neuton-Regular.ttf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: neuton;
  src: url("../fonts/Neuton-Bold.ttf");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: neuton;
  src: url("../fonts/Neuton-Italic.ttf");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: quicksand;
  src: url("../fonts/Quicksand-Regular.ttf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: quicksand;
  src: url("../fonts/Quicksand-Bold.ttf");
  font-weight: bold;
  font-style: normal;
}
p {
  font-family: neuton;
  font-size: 1.2em;
  font-weight: normal;
  font-style: normal;
}

a {
  text-decoration: none;
  color: #fe7db3;
}

h1 {
  font-family: quicksand;
  font-size: 3.5em;
  font-weight: bold;
  font-style: normal;
}

h2 {
  font-family: quicksand;
  font-size: 2.8em;
  font-weight: bold;
  font-style: normal;
  text-align: left;
  position: relative;
  margin-bottom: 0.2em;
  padding-top: 2em;
}

h3 {
  font-family: quicksand;
  font-size: 1.7em;
  font-weight: bold;
  font-style: normal;
}

h5 {
  font-family: quicksand;
  font-size: 1.7em;
  font-weight: regular;
  font-style: normal;
}

h1, h2, h3, h4, h5 {
  word-break: break-word;
}

.btn {
  border-radius: 20px;
  color: #FFF;
  background-color: #666;
  display: inline-block;
  -moz-transition: background-color 2s ease;
  -o-transition: background-color 2s ease;
  -ms-transition: background-color 2s ease;
  -webkit-transition: background-color 2s ease;
  transition: background-color 2s ease;
  font-family: quicksand;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
}
.btn:hover {
  border-radius: 20px;
  color: #FFF;
  background-color: #666;
  cursor: pointer;
}

.image-comic {
  position: relative;
}
.image-comic img {
  border-radius: 50%;
}
.image-comic figcaption {
  font-family: caveat;
  font-size: 1.8em;
  background-color: #FFF;
  top: 0.8em;
  left: 20%;
  position: relative;
  width: 60%;
  padding: 0.5em;
  line-height: 1em;
  text-align: center;
  /* Sprechblase Pfeil */
  --b: 2em; /* base */
  --h: 1.5em; /* height */
  --p: 70%; /* main position (0%:left 100%:right) */
  --x: -1.8em; /* tail position (relative to the main position). Can be percentage */
  --r: 1.2em; /* the radius */
  --c: #fff;
  border-radius: var(--r) var(--r) min(var(--r), 100% - var(--p) - var(--b) / 2) min(var(--r), var(--p) - var(--b) / 2)/var(--r);
  clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%, clamp(var(--b), var(--p) + var(--b) / 2, 100%) 100%, calc(var(--p) + var(--x)) calc(100% + var(--h)), clamp(0%, var(--p) - var(--b) / 2, 100% - var(--b)) 100%);
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) 0 0 1 0/0 0 var(--h) 0/0 999px var(--h) 999px;
}

.image-circle {
  max-width: 150px;
  border-radius: 50%;
}

.image-round-corner {
  border-radius: 25px;
}

#intro h1 {
  text-align: left;
}
#intro h2 {
  font-variant: normal;
  text-align: left;
  margin-bottom: 0.2em;
  font-size: 1.8em;
}
#intro .row div {
  padding: 2em 4em;
}

.navbar {
  border-bottom: 1px solid #666;
  padding-left: 1em;
  padding-right: 1em;
  background-color: #bbe8c9 !important;
}
.navbar .navbar-brand {
  font-family: quicksand;
  font-size: 1.2em;
  font-weight: bold;
  font-style: normal;
}
.navbar .navbar-brand img {
  margin-top: -5px;
}
.navbar .navbar-toggler {
  border: none;
}
.navbar ul li a {
  padding-left: 0.5em;
  padding-right: 0.5em;
  font-family: quicksand;
  font-size: 1em;
  font-weight: normal;
  font-style: normal;
}
.navbar .nav-aktiv {
  background-color: #666;
  color: #FFF;
  border-radius: 20px;
  background-color: #666;
  border-radius: 20px;
  color: #FFF;
}
@media (max-width: 991px) {
  .navbar .nav-aktiv {
    border-radius: 0;
  }
}
.navbar .dropdown-menu {
  margin: 0.1em 0.2em 0.2em 0.2em;
}
.navbar .dropdown-menu .nav-aktiv {
  border-radius: 0;
}
.navbar .nav-item {
  border-radius: 20px;
  -moz-transition: background-color 2s ease;
  -o-transition: background-color 2s ease;
  -ms-transition: background-color 2s ease;
  -webkit-transition: background-color 2s ease;
  transition: background-color 2s ease;
}
.navbar .nav-item:hover {
  background-color: #FFF;
}

.section-text {
  background-color: #FFF;
}
.section-text img {
  max-width: 100%;
  border-radius: 25px;
}

footer {
  text-align: center;
  padding-top: 1em;
}
footer p {
  font-family: quicksand;
  font-size: 1em;
  font-weight: normal;
  font-style: normal;
}

.cc-btn {
  border-radius: 25px;
}

/* custom Klassen
___________________________*/
body, html {
  height: 100%;
}

body {
  color: #666;
  background-color: #fff1cc;
}

@media (min-width: 992px) {
  section {
    padding: 4em 2em;
  }
}
section article {
  padding: 2em;
}

.section-default {
  background-color: #FFF;
}

.content-width {
  max-width: 700px;
  margin: auto;
}

.element-width {
  max-width: 1300px;
  margin: auto;
}

.card {
  border: none;
}

.bg-slanted-left {
  --p: 5em; /* control the shape (can be percentage) */
  clip-path: polygon(0 var(--p), 100% 0, 100% 100%, 0 100%);
}

.bg-slanted-right {
  --p: 5em; /* control the shape (can be percentage) */
  clip-path: polygon(0 0, 100% var(--p), 100% 100%, 0 100%);
}

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