html, body {
  background-color: #FFFFFF;
}

body {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 1.2rem;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 80%;
  font-weight: 900;
  font-variant-caps: all-small-caps;
}

h1 {
  font-size: clamp(3.5rem, 5vw, 5rem);
  margin-top: 3rem;
  transform: scaleX(1.2);
  transform-origin: left center;
  max-width: 80%;
}

h2 {
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  margin-top: 0.5rem;
}

h3 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0rem;
  margin-top: 0.5rem;
}

/* Section spacing adjustments */
.anchor-offset {
  scroll-margin-top: 70px; /* so nav links don't hide titles */
}

/* Header Banner + Title Section */
header.hero {
  margin-top: 3.3rem; /* compensates roughly the bootstrap navbar height */
  height: 20rem;
  background: url('./header_background.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
}

  .c3kids-logo {
    width: 40rem;
    max-width: 90vw;
    height: auto;
    padding-bottom: 1rem;
  }

section.title {
  position: relative;
}

  /* der container soll die "Höhenberechnung" der row nicht zerstören: der
     splash hat 20em ist aber um 6 nach oben versetzt, diese 5 müssen hier
     abgezogen werden! */
  .splash-container {
    height: 16rem;
  }

    .splash {
      position: absolute;
      right: 1rem;     /* rechts andocken */
      top: -6rem;      /* nach oben “aus dem vorherigen Bereich reinragen” */
      width: 20rem;
      max-width: 100%;     /* passt sich col-4 an */
      aspect-ratio: 1 / 1; /* quadratisch */
      background: url('./circle_splash_white.png') center/cover no-repeat;
      background-size: 100%;
      display: flex;
      align-items: center;
      justify-content: center; /* Logo auch horizontal zentrieren */

      /*
        padding: 1rem;
        box-shadow: 0.5rem 0.5rem 1rem #5A108D88;
      */
    }

      .c3church-logo {
        width: 12rem;
        height: auto;
        object-fit: contain;
      }


.block-yellow {
  color: #5A108D;
  background-color: #FEDD59;
}

  .block-yellow .card-title {
    font-size: 2rem;
    font-weight: 700;
    color: #5A108D;
  }

.block-purple {
  color: #FFFFFF;
  background-color: #5A108D;
}

.block-blue {
  color: #FFFFFF;
  background-color: #398CBD;
}

.block-green {
  color: #1E1E1E;
  background-color: #7ED957;
}

.block-magenta {
  color: #330025;
  background-color: #FF80DF;
}

.block-cyan {
  color: #006261;
  background-color: #00D4D5;
}

.block-red {
  color: #460B01;
  background-color: #FC583A;
}

.promo-video {
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;   /* füllt den Bereich ohne Verzerrung */
  width: 100%;         /* passt sich dem Container an */
  height: auto;        /* Höhe wird automatisch skaliert */
}

.promo-video-fallback {
  position: relative;
  background: url('./worship.jpg') center center / cover no-repeat;
}


/* SECTION: SERVICES */

/* Optik wie im Screenshot */
  .card.services-item {
    border-radius: .5rem;
    overflow: hidden; /* damit das Bild beim Hover-Zoom nicht raussteht */
    background: #fff;
    display: flex;
  }

  .services-thumb {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  img.services-thumb  {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* füllt die Box ohne Verzerrung */
    object-position: center;
    display: block;
  }

  /* Lila Pill-Button */
  .btn-services {
    background: #5b23a6;
    color: #fff;
    border-radius: 9999px;
    padding: .6rem 1.25rem;
    font-weight: 700;
    text-decoration: none;
  }

/* / SECTION: SERVICES */



.round-cta-btn {
  padding: 0.3rem 2rem 0.5rem 2rem;
  border-radius: 2rem;
  color: #FFFFFF;
  background-color: #5A108D;
  text-decoration: none;
  font-variant-caps: all-small-caps;
  font-size: 1.3rem;
  font-weight: 300;
}


.events .event-img {
  width: 8em;
  height: 12em;
  object-fit: cover;
  object-position: center;
  border: solid 0px #5A108D;
}

@media (min-width: 768px) {
  .events .event-img {
    width: 12em;
    height: 12em;
  }
}

.events .card-event h4 {
  font-weight: 700;
  font-height: 1.2rem;
  color: #5A108D;
}

.team-leads-quote {
  border-left: 4px solid #AAA;
  margin-left: 0.5rem;
  padding: 1rem;
  font-style: italic;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 0.25rem;
}

  .card-link {
    display: block;
    text-decoration: none;
    color: inherit;
  }

    .card-link .card {
      height: 100%;
      width: 100%;
      overflow: hidden;
      transition: all 0.4s ease-in-out;
    }

    .card-link:hover .card {
      box-shadow: 0.3rem 0.3rem 1rem #5A108D;
      transform: translateX(-0.3rem) translateY(-0.3rem);
      border: 1px solid #5A108D;
    }

    .card-link img.card-img-top {
      width: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

footer h2 {
  font-size: 2rem;
  font-weight:400;
  color: #EEEEEE;
}

footer hr {
  opacity: 0.25;
  color: #FFFFFF;
  border-color: #FFFFFF;
}

footer h3 {
  font-size: 1.5rem;
  font-weight:400;
  color: #EEEEEE;
}

footer {
  color: #BBBBBB;
  font-size: 0.9rem;
}

footer a {
  color: #FEDD59;
}


/* Modal Styling */
.modal-content {
  color: #FFFFFF;
  background-color: #003366;
}

.modal-content .round-cta-btn {
  color: #000000;
  background-color: #FFFFFF;
}

.modal-header,
.modal-footer {
  border: none; /* Optional: Rahmen entfernen */
}

.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  color: #FFFFFF;
  opacity: 1.0;
  border: none !important;
  box-shadow: none !important;
}
/* / Modal Styling */