@font-face {
  font-family: 'Andika';
  src: url('../fonts/Andika-Regular.ttf') format('truetype'),
       url('../fonts/Andika-Italic.ttf') format('truetype'),
       url('../fonts/Andika-BoldItalic.ttf') format('truetype'),
       url('../fonts/Andika-Andika-Bold.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Amatic SC';
  src: url('../fonts/AmaticSC-Regular.ttf') format('truetype'),
       url('../fonts/AmaticSC-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Navigation */
    .navbar {
      height: 200px;
      background-size: cover;
      background-color: rgba(0, 0, 0, 0.2); /* Halbtransparenter schwarzer Hintergrund */
      transition: background-color 0.3s ease;
    }

    .navbar-dark .navbar-nav .nav-link {
        color: white; /* Linkfarbe */
        font-size: 1.2rem;
        font-weight: lighter;
        transition: color 0.3s ease;
    }

    .navbar-dark .navbar-nav .nav-link:hover {
        color: #fe7155; /* Goldene Farbe beim Hover */
    }

    /* Logo im Kreis */
    .navbar-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px; /* Durchmesser des Kreises */
        height: 60px;
        border-radius: 50%; /* Kreisform */
        background-color: rgba(255, 255, 255, 0.8); /* Weiß mit Transparenz */
        font-size: 1rem;
        font-weight: regular;
        color: #000; /* Blau */
        text-align: center;
        line-height: 1.2; /* Reduzierter Zeilenabstand */
        position: absolute;
        top: 20px; /* Positionierung innerhalb der Navigationsleiste */
        left: 20px;
        text-decoration: none;
    }

    /* Links 50px nach oben verschieben */
.navbar-nav {
   position: absolute;
   bottom: 140px; /* Abstand von unten */
   left: 0;
   right: 50px;
   display: flex;
   justify-content: right; /* Zentrierte Links */
}

.navbar-brand, .navbar-nav .nav-link {
      line-height: auto; /* Vertikale Zentrierung von Text und Links */
    }

.brand-logo{
       width: 50;
       height: 50;
    }

.navbar-brand:hover {
        color: #FFD700; /* Logo-Text Hover in Gold */
    }

/* Abgrenzung Förderverein-Link */
.navbar-nav .nav-item.special {
        margin-left: 2rem; /* Abstand zwischen den regulären Links und Förderverein */
    }

/* Full-Page-Header */
     .hero-section {
         position: relative;
         width: 100%;
         height: 100vh; /* Nimmt die volle Höhe des Bildschirms ein */
         background: center/cover no-repeat; /* Bild als Hintergrund */
     }
     /* Text über dem Hintergrundbild */
        .hero-content {
            position: absolute;
            top: 26%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            text-align: center;
            /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); /* Leichter Schatten für bessere Lesbarkeit */
        }
        /* Stil für den Text */
        .hero-content h1 {
          font-family: Amatic SC;
          font-weight: 700;
          font-size: 3rem;
        }

        .hero-content p {
            font-family: Andika;
            font-size: 0.95rem;
            margin-top:-15px;
        }

/* Heading */
.heading {
font-family: Amatic SC;
font-size: 3rem;
text-align: center;
margin-left: 40px;
margin-top: 50px;
margin-bottom: 60px;
}

.heading.w {
color: white;
}
.heading.p{
color: black;
}
.heading.b{
  color: #fe7155;
}

.gallery-item {
    margin-bottom: 30px;
    transition: transform 0.3s ease;
    float: left;
  position: relative;
}

.gallery-item:hover {
    transform: scale(1.03);
}

.gallery-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.gallery-item h2 {
  position: absolute;
  bottom: 10px;
  left: 12px;
  background: rgba(255, 255, 255, 0.75);
  color: black;
  padding: 4px 8px;
  margin: 0;
  font: 14px Sans-Serif;
}


.imgrow {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}

.cntct {
color: white;
text-align: center;
}

.custom-badge {
color: #212529 !important;
font-size: 1.5rem !important;
font-weight: lighter !important;
}

.modal-link {
 color: black !important;
 font-weight: normal;
 text-decoration: none;
}

.modal-link:hover {
 text-decoration: underline;
}

.dates {
  text-align: center;
  font-size: 1rem;
  font-family: Amatic SC;
}

.months {
  color: #13496f;
  font-size: 1.8rem;
  font-family: Andika;
  text-align: center;
  font-weight: lighter;
}

/* Create four equal columns that sits next to each other */
.imgcolumn {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}

.imgcolumn img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}

.offcanvas-body{
}

.navbar .ms-auto {
color: white;
text-align: right;
padding-right: 50px;
}
/* Beispiel: Zusätzliche Inhalte im Offcanvas Menü zentrieren und formatieren */
.offcanvas .d-block.d-lg-none {
text-align: center;
padding: 20%;
border-top: 1px solid #ddd;
}

.contact{
  font-size: 1.2rem;
}

/* Anpassungen für kleinere Bildschirme */
@media (max-width: 768px) {
  .navbar {
      height: 200px; /* Flexible Höhe */
      /* padding: 10px 0; /* Weniger Polsterung */
  }
.brand-logo{
     width: 40px;
     height: 40px;
  }

  .navbar-brand {
      height: 50px;
      width: 50px;
      position: static; /* Logo zentriert in der mobilen Ansicht */
      margin-bottom: 42px; /* Abstand unterhalb des Logos */
  }

  .navbar-nav {
  position: static; /* Standard-Positionierung */
  bottom: none; /* Kein Abstand von unten */
  flex-direction: column; /* Links untereinander anordnen */
  align-items: center; /* Zentrierte Links */
}

  .navbar-nav .nav-item {
      margin: 5px 0; /* Vertikaler Abstand zwischen den Links */
  }

  .navbar-toggler {
      border-color: rgba(255, 255, 255, 0);
      margin-left: auto; /* Hamburger-Menü rechts ausrichten */
      margin-bottom: 65px;
  }

  .navbar-nav .nav-item.special {
      margin-left: 0; /* Entferne Abstand für den "Förderverein"-Link */
  }
  .navbar-dark .navbar-nav .nav-link {
      color: black; /* Linkfarbe */
}

#navbar {
transition: height 0.3s ease, line-height 0.3s ease;
}

#navbar.shrink {
height: 120px; /* Geschrumpfte Höhe */
}

.navbar-brand {
transition: font-size 0.3s ease;
}

#navbar.shrink .navbar-brand {
font-size: 1.2rem; /* Verkleinertes Logo */
}

  .hero-content h1 {
        font-size: 2.5rem;
        margin-top: 20%;
    }

    .hero-content p {
        font-size: 0.9rem;
        margin-top: -10px;
    }

    .heading {
      font-size: 2.5rem;
      text-align: center;
      margin-left: 0px;
      margin-top: 20px;
      /* margin-bottom: 60px; */
    }
    /* Responsive layout - makes a two column-layout instead of four columns */
    .imgcolumn {
      flex: 50%;
      max-width: 50%;
    }

    .contact{
      font-size: 1rem;
    }
  }

  .footer{
    background-color: #212529;
    height: 200px;
  }

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .infos {
    font-size: 0.9rem !important;
  }

.imgcolumn {
  flex: 100%;
  max-width: 100%;
}
.hero-content h1 {
      font-size: 2.1rem;
      margin-top: 0%;
  }

  .hero-content p {
      font-size: 0.9rem;
      margin-top: -10px;
  }

  .heading {
    font-size: 2.5rem;
    text-align: center;
    margin-left: 0px;
    margin-top: 20px;
    /* margin-bottom: 60px; */
  }

}