/* Minimal reset (replaces Bootstrap Reboot) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

img,
svg {
  vertical-align: middle;
}

a {
  color: #5c1a00;
  text-decoration: underline;
}

a:hover {
  color: #fff;
}

/* Bootstrap utility replacements */

.container {
  width: 100%;
  max-width: 950px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}

.col {
  flex: 1 0 0%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.col-lg-6 {
  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

@media (min-width: 992px) {
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .order-lg-1 { order: 1; }
  .order-lg-2 { order: 2; }
}

.d-flex { display: flex; }
.flex-column { flex-direction: column; }

/* Spacing utilities (1 unit = 1rem, scale: my-4=1.5rem, py-2=0.5rem, me-2=0.5rem) */
.my-4 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}


/* navbar-brand: just makes it a flex item that doesn't shrink */
.navbar-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

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

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

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

html {
  scroll-behavior: smooth;
}

body {
  font-size: 1.5rem;
  color: #000;
}

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

h1,
h2,
h3,
h4,
h5,
h6,
nav {
  font-family: Boogaloo;
}



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: Boogaloo !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: Boogaloo;
}

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;
}


.CollapsibleCard {
  font-size: 11px;
  font-family: TenorSans;
  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;
}


/* 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;
}