@font-face {
  font-family: sketch-me;
  src: url(fonts/SketchMeFreeVersion-qxyl.ttf);
}

@font-face {
  font-family: milkylemon;
  src: url(fonts/milkylemon.ttf);
}

@font-face {
  font-family: TenorSans;
  src: url(fonts/TenorSans-Regular.ttf);
}

html {
  scroll-behavior: smooth;
}

body {
  --bs-body-font-size: 1.5rem;
  --bs-nav-link-font-size: 1.7rem;
  --bs-body-color: #000;
  --bs-link-color: #5c1a00;
  --bs-link-color-rgb: 92, 26, 0;
  --bs-link-hover-color: #fff;
  --bs-link-hover-color-rgb: 255, 255, 255;
}

body {
  font-family: TenorSans !important;
  background-color: #FF8872 !important;
  text-align: left !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
nav {
  font-family: milkylemon !important;
}

.container {
  max-width: 950px !important;
}

header {
  background-color: #ED4656;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.5em 1em;
  gap: 1em;
}

header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25em;
  align-items: center;
  font-family: milkylemon !important;
  font-size: 1.3rem;
}

header nav a {
  color: #000;
  white-space: nowrap;
  padding: 0.25em 0.5em;
  text-decoration: none;
}

header nav a:hover {
  color: #fff;
}

header nav a[aria-current="page"] {
  background-color: #C93848;
  border-radius: 4px;
  color: #fff;
}

.unterstuetzer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2em;
  margin-bottom: 1em;
}

.unterstuetzer a {
  display: flex;
  align-items: center;
}

.unterstuetzer img {
  height: 100px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

.page-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 2em;
  padding: 0.75em 1em;
  background-color: #F36976;
  border-radius: 4px;
  font-size: 1.1rem;
}

.page-toc a {
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

.page-toc a:visited {
  color: #000;
}

.page-toc a:hover {
  color: #fff;
}

.page-toc a + a::before {
  content: ' · ';
  color: #000;
}

footer {
  background-image: linear-gradient(to top, #ED4656 95%, #ED4656);
  color: #000000;
}

main a {
  color: #3a2fd4;
}

main a:visited {
  color: #1f1a8a;
}

main a:hover {
  color: #6c4981;
}

details.card {
  margin: 0.5em 0;
  border: none;
}

details.card summary {
  cursor: pointer;
  padding: 0.75em 1em;
  background-color: #F36976;
  border-radius: 4px;
  list-style: none;
  color: #000;
  font-family: milkylemon !important;
}

details.card summary::-webkit-details-marker {
  display: none;
}

details.card summary::before {
  content: '▶ ';
  font-size: 0.8em;
}

details[open].card summary::before {
  content: '▼ ';
}

details.card .card-body {
  padding: 1em;
  background-color: #F36976;
  border-radius: 0 0 4px 4px;
}

.mailLink {
  text-decoration: none;
  color: #000;
}

.mailLink:hover {
  color: #fff;
}

.headerIcons {
  color: #000;
  display: flex;
  align-items: center;
}

.headerIcons:hover {
  color: #fff;
}

.footerIcons {
  margin-left: 9.5em !important;
  font-size: 2em;
  color: #000;
}

.footerIcons:hover {
  color: #fff;
}

.CollapsibleCard {
  font-size: 11px;
  font-family: TenorSans !important;
  font-weight: bold;
}

.image-gallery {
  display: flex;
  margin-bottom: 10px;
}

.image-container {
  margin-right: 10px;
}

.zoomable-image {
  max-width: 100%;
  width: 700px;
  height: auto;
  transition: transform 2.3s ease;
}

.zoomable-image:hover {
  transform: scale(1.2);
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

.white-text {
  color: white;
}

/* inside an <address> tag, add email and telephone number prefixes */
address a[href^='mailto']::before {
  content: '📧 ';
}

address a[href^='tel']::before {
  content: '📞 ';
}

address a[href^='https://']::before {
  content: '🏠 ';
}

/* from Image.css */
.FloatLeftImage {
  width: 100%;
  margin-bottom: 1em;
}

/* Navbar */
.navbar-logo {
  height: 5em;
  width: auto;
}

/* Footer */
.footer-heading {
  margin-bottom: -5px;
}

.footer-heading-social {
  margin-right: -5em;
  margin-left: 13.2em;
}

/* Images */
.img-content {
  max-width: 700px;
}

.img-content-wide {
  max-width: 950px;
}

.img-content-block {
  max-width: 700px;
  width: 100%;
  margin-bottom: 1em;
  margin-top: -1em;
}

.img-full {
  max-width: 1000px;
  width: 100%;
  margin-bottom: 1em;
  margin-top: -1em;
}

.img-full-wide {
  max-width: 950px;
  width: 100%;
  margin-bottom: 1em;
  margin-top: -1em;
}

.img-logo {
  max-width: 500px;
  width: 100%;
  margin: auto;
}

.img-kuratorium {
  max-width: 100%;
  height: auto;
  margin-bottom: 0.5em;
}

.img-kuratorium-right {
  max-width: 100%;
  height: auto;
  margin-bottom: 0.5em;
  float: right;
}

/* Video */
.video-content {
  max-width: 700px;
  width: 100%;
}

/* Misc layout */
.text-justify {
  text-align: justify;
}

.iframe-wrapper {
  margin-top: 20px;
}

.iframe-kalender {
  width: 100%;
  height: 800px;
}