@import url('https://fonts.googleapis.com/css2?family=Six+Caps&display=swap');

/* Navbar */
.navbar {
  position: absolute;
  width: 100%;
  z-index: 1000;
}

body {
  color: #fff;
  background:
    radial-gradient(circle at top center, rgba(51, 51, 133, 0.35), transparent 35%),
    linear-gradient(180deg, #000131 0%, #050510 45%, #000131 100%);
  font-family: "Poppins", sans-serif;
}

button {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.64px;
  text-transform: uppercase;
}

/* Banner */
.banner {
  height: 100vh;
  background: url('../images/bannerbg.png') no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar-nav li a {
  font-size: 16px;
  color: white;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.64px;
  text-transform: uppercase;
}

.welcome {
  color: #F2EB87;
  text-align: center;
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.banner h1 {
  color: #FFF;
  font-family: "Six Caps", sans-serif;
  font-size: 120px;
  font-weight: 400;
  letter-spacing: 4.8px;
}

.banner .para {
  max-width: 708px;
  margin: 0 auto;
  color: #FFF;
  font-family: Poppins;
  font-size: 18px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: 0.8px;
}

.banner-content {
  text-align: center;
  color: #fff;
  padding: 30px;
  border-radius: 10px;
}

.banner p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.banner .btn,
.btn-primary {
  background:
    linear-gradient(
      180deg,
      #fff6b8 0%,
      #f2eb87 30%,
      #c8a94a 58%,
      #fff1a3 82%,
      #b99232 100%
    ) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  width: fit-content;
  padding: 11px 24px;
  color: #050505 !important;
  font-weight: 700;
  letter-spacing: 0.7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25),
    0 8px 18px rgba(0, 0, 0, 0.28),
    0 0 16px rgba(242, 235, 135, 0.12);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.banner .btn:hover,
.btn-primary:hover {
  color: #050505 !important;
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 4px rgba(0, 0, 0, 0.22),
    0 10px 24px rgba(0, 0, 0, 0.34),
    0 0 22px rgba(242, 235, 135, 0.18);
}

.banner .btn:active,
.btn-primary:active {
  transform: translateY(1px);
  filter: brightness(0.96);
}

/* Section below banner */
.info-section {
  padding: 60px 0;
}

.info-section .btn {
  text-transform: uppercase;
  background-color: #F2EB87;
  color: #0D0D0D;
  border: none;
  padding: 10px 20px;
}

.info-section img {
  max-width: 100%;
  border-radius: 10px;
}

.info-section h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.info-section p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.bg-image {
  position: relative;
  color: #fff;
  background-blend-mode: overlay;
}

.bg-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 1, 49, 0.55);
  z-index: 1;
}

.what-we-do {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(0, 1, 49, 0.35));
}

.bottom-img {
  right: 30%;
}

.list-inline-item a {
  text-decoration: none;
  font-weight: bold;
}

.list-inline-item a:hover {
  text-decoration: underline;
}

.sliderbtn {
  width: 60px;
  height: 60px;
  border-radius: 35px;
  border: 1.5px solid var(--F2EB87, #F2EB87);
  box-shadow: 0px 4px 60px 0px rgba(0, 0, 0, 0.06);
}

.catagries {
  color: #F2EB87;
}

.movieslider h3 {
  font-family: "Six Caps";
  font-size: 70px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 2.8px;
}

.movieslider p {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.64px;
}

.creative-media-solutions .card {
  border-radius: 4px;
  background: rgba(113, 113, 113, 0.06) !important;
  backdrop-filter: blur(6px) !important;
}

.scrolling-images img:nth-child(odd) {
  transform: translateY(-10px);
}

.scrolling-images img:nth-child(even) {
  transform: translateY(50px);
}

.lead {
  max-width: 868px;
  margin: 0 auto;
}

.bg-dark {
  background:
    linear-gradient(135deg, rgba(0, 1, 49, 0.96), rgba(5, 5, 16, 0.98));
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
}

.count {
  font-size: 3rem;
  font-weight: bold;
}

.counter h2 {
  -webkit-text-stroke-width: 1;
  -webkit-text-stroke-color: #FFF;
  font-family: "Six Caps";
  font-size: 100px;
  opacity: 0.08;
  font-weight: 400;
  letter-spacing: 8px;
}

.counter p {
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.Bringing .box h4 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 1.28px;
  text-transform: uppercase;
}

.Bringing .box .topp {
  color: #F2EB87;
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.56px;
  text-transform: uppercase;
}

.lastbox {
  max-width: 1021px;
  margin: 0 auto;
}

.creative-media-solutions .card:hover {
  border-radius: 4px;
  background: #F2EB87 !important;
  color: black;
  backdrop-filter: blur(6px) !important;
}

.creative-media-solutions .card:hover svg path {
  fill: black;
}

.overelay {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(0deg, #050510 40%, rgba(255, 255, 0, 0));
}

.what-we-do .para {
  font-family: Poppins;
  font-size: 18px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: 0.72px;
}

.bg-image .container {
  position: relative;
  z-index: 2;
}

.Purpose h2,
.UpcomingMovies h2,
.Create h2,
.what-we-do h2,
section.seminars-courses h2,
.Bringing h2,
.creative-media-solutions h2 {
  font-family: "Six Caps";
  font-size: 60px;
  font-weight: 400;
  letter-spacing: 4px;
}

p {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.64px;
}

.Purpose .para {
  font-family: Poppins;
  font-size: 18px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: 0.72px;
}

/* Container for scrolling images */
.scrolling-images-wrapper {
  overflow: hidden;
  width: 100%;
}

.creative-media-solutions {
  background: url('../images/crativebg.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/* Scrolling images */
.scrolling-images {
  display: flex;
  animation: scroll-left 15s linear infinite;
}

/* Image size and spacing */
.scrolling-images img {
  margin-right: 30px;
}

footer ul li {
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.68px;
  text-transform: uppercase;
}

footer h5 {
  color: #F2EB87;
}

.contactIcon {
  background-color: rgba(255, 255, 255, 0.08);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Scroll animation */
@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@media screen and (max-width: 480px) {
  .banner h1 {
    font-size: 70px;
    font-style: normal;
    font-weight: 400;
    line-height: 107.339%;
    letter-spacing: 2.8px;
  }

  .banner .para {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.56px;
  }
}

@media (max-width: 767px) {
  .carousel-inner .carousel-item>div {
    display: none;
  }

  .carousel-inner .carousel-item>div:first-child {
    display: block;
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {

  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(25%);
  }

  .carousel-inner .carousel-item-start.active,
  .carousel-inner .carousel-item-prev {
    transform: translateX(-25%);
  }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
  transform: translateX(0);
}

/* Footer: Kontakt, externe Links und Social Media */
.contact-label {
  color: #F2EB87;
}

.contact-link {
  color: #8EC9D8;
  text-decoration: none;
}

.contact-link:hover {
  color: #F2EB87;
  text-decoration: underline;
}

.external-link {
  color: #8EC9D8;
  text-decoration: none;
}

.external-link:hover {
  color: #F2EB87;
  text-decoration: underline;
}

footer a {
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

footer ul li {
  text-transform: none;
}

.footer-social p {
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.footer-social a {
  font-weight: 500;
}

/* Footer Social Media */
.footer-social .contact-label {
  color: #F2EB87;
}

.footer-social a.external-link {
  color: #8EC9D8 !important;
  text-decoration: none;
}

.footer-social a.external-link:hover {
  color: #F2EB87 !important;
  text-decoration: underline;
}

.page-ending {
  background:
    linear-gradient(180deg, #050510 0%, #000131 100%);
}

.page-ending-clapper {
  max-width: 260px;
  opacity: 0.85;
}

.subpage-header {
  padding-top: 140px !important;
  background:
    radial-gradient(circle at top center, rgba(51, 51, 133, 0.35), transparent 42%),
    linear-gradient(180deg, #000131 0%, #050510 100%);
}

.subpage-header h1 {
  color: #fff;
}

.subpage-header p {
  color: #fff;
}

.subpage-content {
  background:
    linear-gradient(180deg, #050510 0%, #000131 100%);
  color: #fff;
}

.subpage-content h2 {
  color: #F2EB87;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.subpage-content h2:first-child {
  margin-top: 0;
}

.subpage-content a {
  color: #8EC9D8;
  text-decoration: none;
}

.subpage-content a:hover {
  color: #F2EB87;
  text-decoration: underline;
}

.reference-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(0, 1, 49, 0.28));
  border: 1px solid rgba(242, 235, 135, 0.42);
  padding: 28px;
  margin-top: 24px;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 28px rgba(0, 0, 0, 0.22);
}

.reference-card h3 {
  color: #F2EB87;
  margin-bottom: 12px;
}

.reference-card p:last-child {
  margin-bottom: 0;
}

/* Gelbe Welle / Abschnittsmarkierung */
.section-wave {
  width: 100px;
  height: 10px;
  margin-bottom: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='10' viewBox='0 0 100 10' fill='none'%3E%3Cpath d='M30.508 9.03843C30.2142 9.03843 29.9249 8.92298 29.7081 8.70862L23.4681 2.46871L8.35316 8.94781C7.92858 9.12658 7.43573 9.03388 7.11047 8.70862L0.330534 1.92869C-0.110178 1.48797 -0.110178 0.771247 0.330534 0.330534C0.771247 -0.110178 1.48756 -0.110178 1.92827 0.330534L8.16818 6.57044L23.2848 0.0909357C23.7098 -0.0828663 24.2027 0.00527619 24.5279 0.330534L30.7678 6.57044L45.8849 0.0909357C46.3099 -0.0828663 46.8003 0.00527619 47.128 0.330534L53.9079 7.11047C54.3486 7.55119 54.3486 8.26791 53.9079 8.70862C53.4672 9.14892 52.7505 9.14892 52.3098 8.70862L46.0703 2.46871L30.9532 8.94781C30.8084 9.00657 30.6569 9.03843 30.508 9.03843Z' fill='%23F2EB87'/%3E%3Cpath d='M76.2695 9.03843C75.9757 9.03843 75.6864 8.92298 75.4696 8.70862L69.2297 2.46871L54.1147 8.94781C53.6901 9.12409 53.1973 9.03388 52.872 8.70862L46.0921 1.92869C45.6514 1.48797 45.6514 0.771247 46.0921 0.330534C46.5328 -0.110178 47.2491 -0.110178 47.6898 0.330534L53.9297 6.57044L69.0464 0.0909357C69.4714 -0.0828663 69.9642 0.00279322 70.2895 0.330534L76.5294 6.57044L91.6464 0.0909357C92.0714 -0.0828663 92.5618 0.00279322 92.8895 0.330534L99.6695 7.11047C100.11 7.55119 100.11 8.26791 99.6695 8.70862C99.2288 9.14892 98.512 9.14892 98.0713 8.70862L91.8318 2.46871L76.7148 8.94781C76.5699 9.00657 76.4185 9.03843 76.2695 9.03843Z' fill='%23F2EB87'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.section-wave.center {
  margin-left: auto;
  margin-right: auto;
}

/* Bild mit Gold-/Metallic-Versatzrahmen */
.image-frame-yellow {
  position: relative;
  display: inline-block;
}

.image-frame-yellow::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 18px;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  background:
    linear-gradient(#050510, #050510) padding-box,
    linear-gradient(
      135deg,
      #fff6b8,
      #f2eb87,
      #b99232,
      #fff1a3,
      #c8a94a
    ) border-box;
  z-index: 0;
  box-shadow:
    0 0 18px rgba(242, 235, 135, 0.18),
    inset 0 0 8px rgba(255, 255, 255, 0.25);
}

.image-frame-yellow img {
  position: relative;
  z-index: 1;
  display: block;
}

/* Gold-/Metallic-Abschlussbalken im Footer */
.footer-bottom-bar {
  background:
    linear-gradient(
      180deg,
      #fff6b8 0%,
      #f2eb87 28%,
      #c8a94a 55%,
      #fff1a3 78%,
      #b99232 100%
    );
  color: #050505;
  padding: 12px 0;
  margin-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25),
    0 -8px 20px rgba(242, 235, 135, 0.08);
}

.footer-bottom-bar p,
.footer-bottom-bar a,
.footer-bottom-bar span {
  color: #050505;
}

.footer-bottom-bar p {
  font-size: 0.95rem;
}

.footer-bottom-bar a {
  text-decoration: none;
  font-weight: 700;
  margin: 0 6px;
}

.footer-bottom-bar a:hover {
  text-decoration: underline;
}

/* Produktionsvideo / Signet */
.production-intro {
  background:
    linear-gradient(180deg, #050510 0%, #000131 100%);
}

.production-video {
  width: 100%;
  max-width: 760px;
  border-radius: 14px;
  border: 1px solid rgba(242, 235, 135, 0.45);
  box-shadow:
    0 0 30px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(242, 235, 135, 0.12);
}

/* Optionaler Stempel */
.stamp-box img {
  max-width: 260px;
  opacity: 0.88;
  filter: drop-shadow(0 0 10px rgba(242, 235, 135, 0.16));
}

/* Dezente edle dunkle Sektion */
.dark-section {
  background:
    linear-gradient(135deg, rgba(0, 1, 49, 0.96), rgba(5, 5, 16, 0.98));
}


/* Impressionen-Slider */
.production-impressions {
  background:
    linear-gradient(180deg, #000131 0%, #050510 50%, #000131 100%);
}

.impression-slider {
  max-width: 980px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(242, 235, 135, 0.45);
  box-shadow:
    0 0 30px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(242, 235, 135, 0.12);
}

.impression-slider img {
  height: 520px;
  object-fit: cover;
  object-position: center;
}

/* Textbox im Bild: links unten, nicht über die ganze Breite */
.impression-caption {
  left: 32px;
  right: auto;
  bottom: 32px;
  max-width: 560px;
  width: auto;
  padding: 20px 24px 22px;
  text-align: left;
  background:
    linear-gradient(
      135deg,
      rgba(0, 1, 49, 0.92) 0%,
      rgba(5, 5, 16, 0.96) 100%
    );
  border-left: 3px solid #F2EB87;
  border-radius: 10px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(242, 235, 135, 0.10);
}

.impression-caption h5 {
  color: #F2EB87;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 6px;
  text-align: left;
}

.impression-caption p {
  color: #fff;
  max-width: 480px;
  margin-bottom: 0;
  line-height: 1.6;
  text-align: left;
}

/* Pfeile */
.impression-slider .carousel-control-prev-icon,
.impression-slider .carousel-control-next-icon {
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.8));
}

/* Navigationspunkte */
.impression-slider .carousel-indicators {
  margin-bottom: 12px;
}

.impression-slider .carousel-indicators button {
  background-color: #F2EB87;
}

/* Mobilansicht */
@media screen and (max-width: 767px) {
  .impression-slider img {
    height: 320px;
  }

  .impression-caption {
    left: 16px;
    right: 16px;
    bottom: 18px;
    max-width: none;
    padding: 16px 18px 18px;
  }

  .impression-caption h5 {
    font-size: 1.05rem;
  }

  .impression-caption p {
    max-width: none;
    font-size: 0.9rem;
    line-height: 1.45;
  }
}

/* Mobile Navigation: aufgeklapptes Menü besser lesbar */
@media screen and (max-width: 991px) {

  .navbar {
    padding: 14px 16px;
  }

  .navbar .container {
    align-items: flex-start;
  }

  .navbar-brand img {
    max-width: 185px;
    height: auto;
  }

  .navbar-toggler {
    margin-left: auto;
    border: 1px solid rgba(242, 235, 135, 0.55);
    background:
      linear-gradient(
        135deg,
        rgba(0, 1, 49, 0.88),
        rgba(5, 5, 16, 0.95)
      );
    box-shadow:
      0 0 14px rgba(0, 0, 0, 0.45),
      0 0 12px rgba(242, 235, 135, 0.12);
  }

  .navbar-toggler:focus {
    box-shadow:
      0 0 0 2px rgba(242, 235, 135, 0.35),
      0 0 14px rgba(0, 0, 0, 0.45);
  }

  .navbar-collapse {
  width: 38%;
  min-width: 220px;
  max-width: 280px;
  margin-top: 16px;
  margin-left: auto;
  padding: 16px 18px;
  background:
    linear-gradient(
      135deg,
      rgba(0, 1, 49, 0.96),
      rgba(5, 5, 16, 0.98)
    );
  border: 1px solid rgba(242, 235, 135, 0.38);
  border-radius: 14px;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(242, 235, 135, 0.08);
  backdrop-filter: blur(8px);
}

  .navbar-nav {
    width: 100%;
  }

  .navbar-nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .navbar-nav li:last-child {
    border-bottom: none;
  }

  .navbar-nav li a,
  .navbar-nav .nav-link {
    display: block;
    padding: 11px 4px;
    color: #fff !important;
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: 0.7px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
  }

  .navbar-nav li a:hover,
  .navbar-nav .nav-link:hover {
    color: #F2EB87 !important;
  }
}

/* Slider-Textbox auch auf Handy anzeigen */
.impression-slider .carousel-caption,
.impression-slider .impression-caption {
  display: block !important;
}

@media screen and (max-width: 767px) {
  .impression-slider .carousel-caption,
  .impression-slider .impression-caption {
    display: block !important;
    left: 12px;
    right: 12px;
    bottom: 14px;
    max-width: none;
    padding: 12px 14px 14px;
  }

  .impression-caption h5 {
    font-size: 0.95rem;
    margin-bottom: 4px;
  }

  .impression-caption p {
    font-size: 0.8rem;
    line-height: 1.35;
  }
}

/* Referenzseite: Gold-/Metallic-Linkbuttons */
.reference-link-group {
  margin-top: 16px;
  margin-bottom: 0;
}

.reference-link-button {
  display: inline-block;
  margin-top: 8px;
  margin-right: 10px;
  padding: 9px 17px;
  border-radius: 999px;
  color: #050505 !important;
  text-decoration: none !important;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.35px;
  background:
    linear-gradient(
      180deg,
      #fff6b8 0%,
      #f2eb87 30%,
      #c8a94a 58%,
      #fff1a3 82%,
      #b99232 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25),
    0 7px 18px rgba(0, 0, 0, 0.28),
    0 0 16px rgba(242, 235, 135, 0.12);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.reference-link-button:hover {
  color: #050505 !important;
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 4px rgba(0, 0, 0, 0.22),
    0 10px 24px rgba(0, 0, 0, 0.34),
    0 0 22px rgba(242, 235, 135, 0.18);
}

.reference-link-button:active {
  transform: translateY(1px);
  filter: brightness(0.96);
}

@media screen and (max-width: 767px) {
  .reference-link-button {
    display: block;
    width: fit-content;
    margin-right: 0;
    margin-bottom: 8px;
  }
}

/* Hellblauer Metallic-Akzent */
.reference-card {
  position: relative;
  overflow: hidden;
}

/* feine blau-metallische Lichtkante oben in den Referenzkarten */
.reference-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(142, 201, 216, 0.25) 15%,
      rgba(180, 235, 245, 0.85) 50%,
      rgba(142, 201, 216, 0.25) 85%,
      transparent 100%
    );
}

/* dezenter blauer Glanz beim Überfahren */
.reference-card:hover {
  border-color: rgba(142, 201, 216, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 28px rgba(0, 0, 0, 0.26),
    0 0 22px rgba(142, 201, 216, 0.10);
}

/* hellblauer Metallic-Schimmer zusätzlich auf Goldbuttons */
.reference-link-button {
  position: relative;
  overflow: hidden;
}

.reference-link-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(142, 201, 216, 0.10) 35%,
      rgba(210, 245, 255, 0.55) 50%,
      rgba(142, 201, 216, 0.10) 65%,
      transparent 100%
    );
  transform: skewX(-18deg);
  transition: left 0.45s ease;
}

.reference-link-button:hover::after {
  left: 125%;
}

/* Kontakt- und externe Links etwas edler hellblau */
.contact-link,
.external-link {
  color: #8EC9D8;
  text-shadow: 0 0 10px rgba(142, 201, 216, 0.12);
}

.contact-link:hover,
.external-link:hover {
  color: #D2F5FF;
  text-shadow:
    0 0 10px rgba(142, 201, 216, 0.35),
    0 0 18px rgba(142, 201, 216, 0.18);
}

/* Globaler hellblauer Metallic-Akzent für die gesamte Website */
:root {
  --mfp-gold: #F2EB87;
  --mfp-blue: #8EC9D8;
  --mfp-blue-light: #D2F5FF;
  --mfp-dark-blue: #000131;
  --mfp-dark: #050510;
}

/* Grundhintergrund mit etwas mehr blauem Tiefenlicht */
body {
  background:
    radial-gradient(circle at top left, rgba(142, 201, 216, 0.16), transparent 28%),
    radial-gradient(circle at top right, rgba(51, 51, 133, 0.32), transparent 34%),
    linear-gradient(180deg, #000131 0%, #050510 45%, #000131 100%);
}

/* Dunkle Standardbereiche mit dezentem Blauverlauf */
.subpage-header,
.subpage-content,
.production-intro,
.production-impressions,
.page-ending,
section.seminars-courses,
.what-we-do {
  background:
    radial-gradient(circle at top center, rgba(142, 201, 216, 0.10), transparent 36%),
    linear-gradient(180deg, #000131 0%, #050510 55%, #000131 100%);
}

/* Footer nicht flach schwarz, sondern leicht blau-metallisch */
footer {
  background:
    radial-gradient(circle at top center, rgba(142, 201, 216, 0.10), transparent 35%),
    linear-gradient(180deg, #050510 0%, #000131 100%) !important;
}

/* Helle blau-metallische Lichtkante für Karten und Boxen */
.reference-card,
.creative-media-solutions .card {
  position: relative;
  overflow: hidden;
}

.reference-card::before,
.creative-media-solutions .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(142, 201, 216, 0.18) 15%,
      rgba(210, 245, 255, 0.85) 50%,
      rgba(142, 201, 216, 0.18) 85%,
      transparent 100%
    );
  pointer-events: none;
}

/* Karten bekommen beim Hover einen kühlen blauen Schimmer */
.reference-card:hover,
.creative-media-solutions .card:hover {
  border-color: rgba(142, 201, 216, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 28px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(142, 201, 216, 0.13);
}

/* Goldbuttons behalten Gold, bekommen aber blauen Lichtreflex */
.btn-primary,
.banner .btn,
.reference-link-button {
  position: relative;
  overflow: hidden;
}

.btn-primary::after,
.banner .btn::after,
.reference-link-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -85%;
  width: 55%;
  height: 100%;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(142, 201, 216, 0.10) 34%,
      rgba(210, 245, 255, 0.58) 50%,
      rgba(142, 201, 216, 0.10) 66%,
      transparent 100%
    );
  transform: skewX(-18deg);
  transition: left 0.45s ease;
  pointer-events: none;
}

.btn-primary:hover::after,
.banner .btn:hover::after,
.reference-link-button:hover::after {
  left: 125%;
}

/* Hellblaue Links etwas edler und sichtbarer */
.contact-link,
.external-link {
  color: var(--mfp-blue) !important;
  text-shadow: 0 0 10px rgba(142, 201, 216, 0.12);
}

.contact-link:hover,
.external-link:hover {
  color: var(--mfp-blue-light) !important;
  text-shadow:
    0 0 10px rgba(142, 201, 216, 0.35),
    0 0 18px rgba(142, 201, 216, 0.18);
}

/* Navigation: blauer Hover-Glow zusätzlich zum Gold */
.navbar-nav li a:hover,
.navbar-nav .nav-link:hover {
  color: var(--mfp-gold) !important;
  text-shadow:
    0 0 10px rgba(242, 235, 135, 0.24),
    0 0 16px rgba(142, 201, 216, 0.18);
}

/* Bildrahmen bekommen zusätzlich einen kühlen Lichtschein */
.image-frame-yellow::before {
  box-shadow:
    0 0 18px rgba(242, 235, 135, 0.18),
    0 0 24px rgba(142, 201, 216, 0.10),
    inset 0 0 8px rgba(255, 255, 255, 0.25);
}

/* Slider und Video mit leichtem Blauglanz */
.impression-slider,
.production-video {
  box-shadow:
    0 0 30px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(242, 235, 135, 0.10),
    0 0 28px rgba(142, 201, 216, 0.10);
}

/* Mobile Menübox ebenfalls im Blau-/Gold-Look */
@media screen and (max-width: 991px) {
  .navbar-collapse {
    background:
      radial-gradient(circle at top right, rgba(142, 201, 216, 0.16), transparent 38%),
      linear-gradient(
        135deg,
        rgba(0, 1, 49, 0.97),
        rgba(5, 5, 16, 0.99)
      );
    border-color: rgba(142, 201, 216, 0.35);
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.55),
      0 0 18px rgba(142, 201, 216, 0.12),
      0 0 14px rgba(242, 235, 135, 0.08);
  }
}