/* Allgemeine Stile */




/* Icon Font laden */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

body {
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  background-color: #000;
  color: #fff;
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
}

p {
  line-height: 1.2;
  /* Reduziert den Zeilenabstand */
}

/* Zentrale Überschriftgrößen und Gewicht */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--bs-heading-color);
  font-family: "futura-pt-bold", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.2;
}

h1 {
  font-size: 4rem;
}

h2 {
  font-size: 4rem;
}

h3 {
  font-size: 2.5rem;
}

h4 {
  font-size: 2rem;
}

h5 {
  font-size: 1.5rem;
}

h6 {
  font-size: 1.25rem;
}

/* Container */
.container-fluid {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* Anpassung der H3 Größe für md-Bildschirme (768px bis 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  h3 {
    font-size: 2.1rem;
  }
}

/* Anpassung der Schriftgrößen für Bildschirme unter 768px */
@media (max-width: 768px) {
  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2.6rem;
  }

  h3 {
    font-size: 2.1rem;
  }
}

/* ######################################################################## */



/* Azoolia Navbar */
.azoolia-navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(60, 108, 175, 0.6);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.azoolia-navbar.scrolled {
  background-color: rgba(60, 108, 175, 0.93);
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
}

.navbar-left {
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-link {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav-link i {
  margin-right: 8px;
  font-size: 0.9rem;
}



/* Social Media Icons */
.social-media-icons {
  color: rgb(255, 255, 255);
  font-weight: 600;
  font-size: 1rem;
  margin-left: 10px;
  position: fixed;
  z-index: 1020;
  top: 8px;
  right: 75px;
  display: flex;
  align-items: center;
}

.social-media-icons img {
  margin-left: 11px;
  margin-right: 11px;
  height: 18px;
  width: auto;
}

.hashtag {
  position: absolute;
  top: 29px;
  right: 6px;
  color: white;
  font-size: 11px;
  font-weight: 500;
}


/* Hamburger Icon (wird bei kleineren Bildschirmen angezeigt) */
.hamburger-icon {
  display: none;
  background: transparent;
  border: none;
}

/* Collapsed Mobile Menu */
.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 10px;
  background-color: rgba(60, 108, 175, 0.93);
  position: absolute;
  top: 100%;
  padding: 10px 20px;
  border-bottom-right-radius: 20px;
  transform: translateY(-100%);
  transition: transform 0.3s ease, display 0.3s ease;
  z-index: 2000;
}

.mobile-nav.active {
  display: flex;
  transform: translateY(0);
}

.azoolia-navbar.scrolled {
  background-color: rgba(60, 108, 175, 0.93);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

body.menu-open {
  overflow: hidden;
}


/* Dropdown Styling */
.nav-link.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}

/* Activate dropdown on hover */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* Responsive styles für Bildschirme kleiner als 1024px */
@media (max-width: 1024px) {
  .nav-links {
    display: none;
  }

  .hamburger-icon {
    display: block;
  }

  .social-media-icons {
    top: 1px;
    right: 15px;
  }

  .dropdown-menu {
    position: static;
  }
}




/* ######################################################################## */

#main-info {
  background-image: url('../pict/bg/blue_grad.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 5rem 0;
}



.main-heading {
  color: #fff;
  text-shadow: 2px 2px 5px #0a6da3;
}


#main-info .intro-text,
#main-info p {
  text-align: left;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.6;
  margin-top: 1rem;
}



/* Styling for text columns */
.intro-text-wrapper {
  column-count: 2;
  /* Zwei Spalten */
  column-gap: 30px;
  /* Abstand zwischen den Spalten */
}

.intro-text-wrapper p {
  margin: 0;
  /* Setzt den Rand auf Null, um einheitliche Ausrichtung zu gewährleisten */
  padding: 0;
}

#main-info .container {
  max-width: 960px;
  margin: 0 auto;
}

/* Float-Einstellungen für das Bild */
.float-img {
  float: right;
  max-width: 300px;
  height: auto;
  position: relative;

}

/* Stil für den Textcontainer */
.intro-text-wrapper {
  text-align: left;
}

/* Schriftgröße für den speziellen Absatz */
.small-text {
  font-size: 0.9rem !important;
}

@media (max-width: 768px) {
  #main-info {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #main-info .intro-text {
    font-size: 1.1rem;
    /* Schriftgröße */
    line-height: 1.3;
    /* Zeilenhöhe */
  }
}



/* ######################################################################## */

#section-peppino-books {
  position: relative;
  background-color: #fff;
}

.peppino-books-heading {
  color: #458AC7;
  margin-bottom: 5%;
  margin-top: 3%;
  text-shadow: 1px 1px 2px rgba(29, 61, 105, 0.2);
}





/* ##################################################################### */




/* Hero Section */
.hero-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Azoolia Logo unten */
.azoolia-logo {
  position: relative;
  bottom: 20px;
  width: 90px;
  left: 20px;
  z-index: 10;
}

/* Hero Slider */
.hero-slider {
  width: 100%;
  height: auto;
  margin: 0;
}

.hero-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.hero-slider .slick-prev,
.hero-slider .slick-next {
  z-index: 5;
  width: 60px;
  height: auto;
}

.hero-slider .slick-prev {
  left: 35px;
}

.hero-slider .slick-next {
  right: 35px;
}

.hero-slider .slick-prev:before,
.hero-slider .slick-next:before {
  display: none;
}



.hero-slider .slick-dots {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  z-index: 5;
}

.hero-slider .slick-dots li {
  display: inline-block;
  margin: 0 5px;
}

.hero-slider .slick-dots li button:before {
  font-size: 12px;
  color: white;
}

.hero-slider .slick-dots li.slick-active button:before {
  color: #B35C35;
}

.slick-dotted.slick-slider {
  margin-bottom: 0;
}




/* ####################################################################################### */



/* Meet Section Styling */
.meet-section {
  padding: 0;
}

.meet-heading {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  color: white;
}

/* Textschatten für die Entdeckerzone Überschrift */
#section-meet .bg-orange-grad .meet-heading {
  text-shadow: 2px 2px 5px rgba(125, 67, 0, 0.8);
  /* Orange Schatten */
}

/* Textschatten für die Familienzone Überschrift */
#section-meet .bg-green-grad .meet-heading {
  text-shadow: 2px 2px 5px rgb(1, 77, 1);
  /* Grüner Schatten */
}

/* Sicherstellen, dass jedes meet-item im 16:9-Verhältnis bleibt */
.meet-section .col-md-6 {
  aspect-ratio: 16 / 9;
  /* Erzwingt das 16:9 Seitenverhältnis */
  overflow: hidden;
}

.meet-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bild füllt den Container aus */
}

/* SVG Background */
.bg-blue-grad,
.bg-green-grad,
.bg-orange-grad {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
}

.bg-blue-grad {
  background-image: url('../pict/bg/dark_blue_grad.svg');
}

.bg-green-grad {
  background-image: url('../pict/bg/green_grad.svg');
}

.bg-orange-grad {
  background-image: url('../pict/bg/orange_grad.svg');
}



/* Standard Button Stil */
.meet-button {
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  margin-top: 20px;
  border: 1px solid transparent;
  /* Transparenter Rahmen, um die Position zu halten */
  transition: color 0.3s ease, border-color 0.3s ease;
  /* Glatte Übergänge für Farbe und Rahmen */
}

/* Orange Button für Entdeckerzone */
.meet-button-orange {
  background-color: #ff9900;
  /* Orange passend zur Entdeckerzone */
  border-color: #ffdd57;
  /* Leuchtender Rahmen */
}

.meet-button-orange:hover {
  background-color: #cc7a00;
  color: #8a4e00;
  /* Dunklere Schriftfarbe im Hover-Zustand */
  border-color: #ffdd57;
  /* Rahmen bleibt leuchtend */
  text-decoration: none;
  /* Keine Unterstreichung bei Hover */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
  /* Weißer Hover-Schatten */
}

/* Grüne Button für Familienzone */
.meet-button-green {
  background-color: #28a745;
  /* Grün passend zur Familienzone */
  border-color: #70db70;
  /* Leuchtender Rahmen */
}

.meet-button-green:hover {
  background-color: #218838;
  color: #155d26;
  /* Dunklere Schriftfarbe im Hover-Zustand */
  border-color: #70db70;
  /* Rahmen bleibt leuchtend */
  text-decoration: none;
  /* Keine Unterstreichung bei Hover */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
  /* Weißer Hover-Schatten */
}

/* Blaue Button für Exklusive Inhalte */
.meet-button-blue {
  background-color: #007bff;
  /* Blau passend zu Exklusiven Inhalten */
  border-color: #99ccff;
  /* Leuchtender Rahmen */
}

.meet-button-blue:hover {
  background-color: #0056b3;
  color: #003580;
  /* Dunklere Schriftfarbe im Hover-Zustand */
  border-color: #99ccff;
  /* Rahmen bleibt leuchtend */
  text-decoration: none;
  /* Keine Unterstreichung bei Hover */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
  /* Weißer Hover-Schatten */
}


#section-meet a:hover {
  text-decoration: none;
  /* Entfernt die Unterstreichung auch beim Hover */
}

#section-meet a {
  text-decoration: none;
  /* Entfernt die Unterstreichung */
  color: inherit;
  /* Übernimmt die Textfarbe des Containers */
}

/* Media Query für Bildschirme zwischen 1024px und 768px */
@media (max-width: 1024px) and (min-width: 768px) {
  #section-meet p {
    font-size: 0.9rem;
  }

  /* Anpassung der Buttons in der Media Query */
  .meet-button {
    font-size: 0.8rem;
    /* Kleinere Schriftgröße */
    padding: 2px 20px;
    /* Reduziertes Padding */
    margin-top: 0px;
  }
}

/* Media Query für Bildschirme kleiner als 768px - aspect-ratio entfernen */
@media (max-width: 767px) {

  .meet-section .col-md-6 {
    aspect-ratio: auto;
  }

  .meet-heading {
    font-size: 1.3rem;
    /* Überschrift */
  }

  .text-center p {
    font-size: 0.8rem;
    /* Absatz */
  }

  #section-meet .col-md-6 {
    cursor: pointer;
    /* Zeigt an, dass der gesamte Bereich anklickbar ist */
  }

  #section-meet .text-center {
    padding: 0;
    /* Entfernt das Padding bei kleineren Bildschirmen */
  }

  #section-meet .meet-button {
    display: none;
    /* Versteckt den Button auf Mobilgeräten */
  }





}






/* ########################################################################################## */


/* Friends Section */
#section-friends {
  position: relative;
  background-color: #fff;
}

.friends-heading {
  color: rgb(86, 86, 86);
  margin-bottom: 5%;
  margin-top: 3%;
  text-shadow: 2px 2px 4px rgba(130, 130, 130, 0.7);
}

/* Friends Slider */
.friend-slider {
  max-width: 70%;
  margin: 0 auto;
}

.friend {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.friend-img {
  width: 200px;
  height: auto;
}

.friend-name {
  margin-top: 5px;
  font-family: 'Dancing Script', cursive;
  font-size: 1.9vw;
  font-weight: 600;
  color: #333;
  text-align: center;
}

/* Specific Slick Slider for Friends Slider */
.friend-slider .slick-slide {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0px;
}

.friend-slider .slick-prev,
.friend-slider .slick-next {
  width: 60px;
  height: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
}

.friend-slider .slick-prev {
  left: -80px;
}

.friend-slider .slick-next {
  right: -80px;
}

@media (max-width: 768px) {
  .friend-img {
    width: 100px;
  }

  .friend-name {
    font-size: 12px;
  }

  .friend-slider .slick-prev,
  .friend-slider .slick-next {
    width: 30px;
  }

  .friend-slider .slick-prev {
    left: -40px;
  }

  .friend-slider .slick-next {
    right: -40px;
  }
}




/* ######################################################################################### */


/* Media Section */
#section-media {
  position: relative;
  width: 100%;
  background-image: url('../pict/bg/bg_grad.svg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}


.media-heading {
  /* margin-bottom: 5%; */
  margin-top: 3%;
  color: white;
  text-shadow: 2px 2px 4px rgba(155, 78, 5, 0.7);
}

.media-container {
  position: relative;
  width: 100%;
}

.jukebox-img {
  max-width: 100%;
  height: auto;
}

.media-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background-color: #FC9849;
  border: 1px solid white;
  border-radius: 30px;
  text-decoration: none;
  color: white;
  font-family: 'Futura PT Bold', sans-serif;
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.3s ease;

  text-transform: uppercase;
}

.media-button::before {
  content: '\25B6';
  font-size: 1.2rem;
  margin-right: 10px;
  color: white;
}

.media-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: #8e6a22;
  box-shadow: 0 0 10px 5px rgba(250, 244, 230, 0.8);
  text-decoration: none;
}

.media-button:hover::before {
  color: #8e6a22;
}




#section-audio-preview {
  position: relative;
  width: 100%;
  background-image: url('../pict/bg/bg_grad_yellow.svg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}


#section-reviews {
  position: relative;
  width: 100%;
  background-image: url('../pict/bg/green_grad.svg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}



#section-books-preview {
  position: relative;
  width: 100%;
  background-image: url('../pict/bg/blue_grad.svg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.book-title-white {
  font-family: "futura-pt-bold", sans-serif;
  color: #c2d7ea;
  text-transform: uppercase;
  margin-bottom: 60px;
}

.blockquote-footer {
  color: #fdfeff;
}

.reviews-heading {
  text-shadow: 2px 2px 4px rgba(27, 108, 5, 0.9);
  margin-bottom: 5%;
  margin-top: 3%;
}

.books-preview-heading {
  text-shadow: 2px 2px 4px rgba(5, 55, 108, 0.9);
  margin-bottom: 5%;
  margin-top: 3%;

}


.book-card-container a {
  text-decoration: none;
  /* Entfernt die Unterstreichung */
}

.book-card-container a .book-title-white {
  transition: color 0.3s ease;
  /* Smooth transition for color change */
}

.book-card-container a:hover .book-title-white {
  color: #ffffff;
  /* Farbe auf Weiß beim Hover ändern */
}


@media (max-width: 768px) {
  .book-title-white {
    font-size: 0.9rem;
  }
}

/* #################################################################################### */

/* Gallery Section */
#gallery-section {
  background-color: white;
  width: 100%;
}

.gallery-heading {
  text-shadow: 2px 2px 4px rgba(40, 74, 142, 0.7);
  color: #3961A6;
  margin-bottom: 5%;
  margin-top: 3%;
}


.gallery-slider {
  width: 100%;
  padding-bottom: 10px;
  /* margin: 0 auto; */

}

.gallery-slider .slick-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 5px;

}

.gallery-thumbs .slick-list,
.gallery-thumbs .slick-track {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-thumbs .slick-slide img {
  padding: 3px;
  border-radius: 10px;
  cursor: pointer;
}

.gallery-thumbs .slick-current img {
  border: 2px solid #B35C35;

}






/* ################################################################################ */




/* Books Section */
#section-books {
  background-image: url('../pict/bg/book_grad_BG.svg');
  background-size: cover;
  background-position: center;
}



.pa-logo {
  width: 50%;
  height: auto;
  max-width: 430px;
  margin-top: 150px;
  filter: drop-shadow(3px 3px 5px rgba(13, 32, 95, 0.3));
}





.book-title {
  font-family: "futura-pt-bold", sans-serif;
  color: #458ac7;
  text-transform: uppercase;

  margin-bottom: 60px;
}

.books-heading {
  margin-bottom: 13%;
  margin-top: 10%;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}



/* #################################################################################### */


/* Footer */
.footer {
  background-color: #2C2F34;
  color: white;
  padding: 40px 0;
}

.footer-logo {
  width: 140px;
  margin-bottom: 20px;
}

.copyright-text {
  font-size: 12px;
  margin-bottom: 15px;
  color: #aaa;
}

.footer-link {
  font-size: 16px;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
}

.footer-link:hover {
  color: #ddd;
}

.book-info {
  display: flex;
  align-items: center;
}

.footer-book-title {
  font-size: 16px;
  font-weight: 700;
}

.footer-book-age {
  font-size: 14px;
  color: #ddd;
}

.footer-book-price {
  font-size: 24px;
  font-weight: bold;
}

.price-label {
  font-size: 18px;
  margin-right: 5px;
}

.price-value {
  font-size: 18px;
  font-weight: 200;
  color: #ffffff;
}

.book-gift {
  width: 77px;
  height: auto;
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.9));
}

.btn-light {
  background-color: #56595E;
  color: #ffffff;
  border-radius: 35px;
  padding: 2px 30px;
  text-transform: uppercase;
  font-size: 12px;
  margin-left: 10px;
}

.footer-logo-link {
  text-decoration: none;
  cursor: pointer;
}

.footer-logo-link img {
  display: block;
  /* Optional: entfernt unnötigen Abstand um das Bild */
}

.footer-logo-link:hover {
  text-decoration: none;
  /* Beibehaltung von keiner Textdekoration beim Hover */
}

.btn-light:hover {
  background-color: #c0c0c0;
  color: #000;
}

/* Styling für den Installationsbutton und Hinweistext */
.footer-app {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.footer-app .install-hint {
  font-size: 0.85rem;
  color: #cccccc;
  margin-top: 0;
  margin-left: 10px;
  text-align: left;
}

/* Installationsbutton */
#installButton {
  background-color: #28a745;
  color: white;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 5px;
}

/* Hover Effekt für Installationsbutton */
#installButton:hover {
  background-color: #218838;
  color: white;
}

/* Mobile-Friendly Anpassungen */
@media (max-width: 768px) {
  .footer-app {
    display: block;
    text-align: center;
  }

  .footer-app .install-hint {
    margin-left: 0;
    margin-top: 10px;
  }

  #installButton {
    width: 100%;
  }
}


/*############################################################################  */


#books-code-entry {
  background-image: url('../pict/bg/blue_grad.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 20px;
}

.book-code-heading {
  text-transform: uppercase;
  color: #ffffff;
  /* Beispiel-Farbe */
  margin-bottom: 25px;
  text-shadow: 2px 2px 4px rgba(11, 64, 156, 0.6);

}

.book-code-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 20px;
  background-color: #49a5fc;
  border: 1px solid white;
  border-radius: 30px;
  text-decoration: none;
  color: white;
  font-family: 'Futura PT Bold', sans-serif;
  font-weight: bold;
  font-size: 0.9rem;
  transition: all 0.3s ease;

  text-transform: uppercase;
}

.book-code-button::before {
  /* content: '\25B6'; */
  font-size: 0.9rem;
  margin-left: 10px;
  color: white;
}

.book-code-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: #22368e;
  box-shadow: 0 0 10px 5px rgba(250, 244, 230, 0.8);
  text-decoration: none;
}

.book-code-button:hover::before {
  color: #22368e;
}

.rounded-input {
  border-radius: 25px;
  padding-left: 10px;
}

.small-star {
  font-size: 12px;
}

.medium-star {
  font-size: 16px;
}

.large-star {
  font-size: 20px;
}

/*############################################################################  */



/* Memory Game Section */
#memory-game {
  background-image: url('../pict/bg/blue_grad.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 20px;
}

#memory-game h2 {
  margin-bottom: 20px;
}

/* Game Board Grid Layout */
.game-board {
  display: grid;
  grid-template-columns: repeat(4, 150px);
  /* 4 Karten pro Reihe */
  grid-gap: 20px;
  justify-content: center;
  margin-top: 30px;
}

/* Card container */
.card {
  width: 150px;
  height: 204px;
  /* Höhe gemäß dem Aspect Ratio */
  position: relative;
  perspective: 1000px;
  background-color: transparent;
  /* Entfernt die weiße Fläche */
  overflow: hidden;
  /* Verhindert das sichtbare Umblättern */
}

.card .front,
.card .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  /* Verstecke die Rückseite */
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  /* Shadow for each card */
  transition: transform 0.5s ease;
  /* Animation beim Umdrehen */
  background-color: transparent;
}

/* Back of the card (Kartenrückseite, sichtbar zu Beginn) */
.card .back {
  background-image: url('../pict/card_game/card_back.jpg');
  /* Rückseite der Karte */
  background-size: cover;
  background-position: center;
}

/* Front of the card (Vorderseite, standardmäßig versteckt) */
.card .front {
  background-size: cover;
  background-position: center;
  transform: rotateY(180deg);
  /* Verstecke die Vorderseite initial */
}

/* Flip die Karte */
.card.flip .front {
  transform: rotateY(0deg);
  /* Vorderseite wird sichtbar */
}

.card.flip .back {
  transform: rotateY(180deg);
  /* Rückseite wird unsichtbar */
}

/* Game Button Stil */
.game-button {
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  margin-top: 20px;
  border: 1px solid transparent;
  /* Transparenter Rahmen */
  background-color: #007bff;
  /* Blau passend zum Spiel */
  border-color: #99ccff;
  /* Leuchtender Rahmen */
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  /* Glatte Übergänge */
}

/* Hover-Effekte für Game Button */
.game-button:hover {
  background-color: #0056b3;
  /* Dunklerer Blauton beim Hover */
  color: #003580;
  /* Dunklere Schriftfarbe */
  border-color: #99ccff;
  /* Rahmen bleibt leuchtend */
  text-decoration: none;
  /* Keine Unterstreichung */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
  /* Weißer Hover-Schatten */
}


/* Platzhalter für die Sterne */
.star-placeholder {
  margin-right: 10px;
  opacity: 0.3;
  /* Pfotenbild ist transparent, bis es "aktiv" wird */
}

/* Memory Game Styles */
#memory-game h2 {
  margin-bottom: 20px;
}

#stars img {
  margin-right: 10px;
}

#attempts {
  font-family: 'Dancing Script', cursive;
  font-size: 1.2rem;
  margin-top: 10px;
}



/* Karten für kleinere Bildschirme anpassen */
@media (max-width: 768px) {
  .card {
    width: 80px;
    /* Verkleinerte Breite für Mobilgeräte */
    height: 136px;
    /* Entsprechende Höhe gemäß dem 16:9-Verhältnis */
  }

  .game-board {
    grid-template-columns: repeat(4, 100px);
    /* 3 Karten pro Reihe für Mobilgeräte */
    grid-gap: 10px;
    /* Kleinerer Abstand zwischen den Karten */
  }
}

@media (max-width: 480px) {
  .card {
    width: 80px;
    /* Noch kleinere Karten für sehr kleine Bildschirme */
    height: 108px;
    /* Entsprechende Höhe */
  }

  .game-board {
    grid-template-columns: repeat(2, 80px);
    /* 2 Karten pro Reihe für sehr kleine Bildschirme */
    grid-gap: 8px;
    /* Kleinerer Abstand zwischen den Karten */
  }
}


/* ########################################################################### */



/* Familienzone Bücher Section */
#section-familienzone-books {
  padding: 50px 0;
  background-size: cover;
  background-position: center;
}

#section-familienzone-books h2.main-heading {
  margin-bottom: 40px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  /* Leichter Schatten für die Überschrift */
}



/* Buchbild */
.familienzone-book-image {
  width: 100%;
  /* Bild nimmt die volle Breite der Karte ein */
  border-radius: 10px;
}

/* Buchtitel */
.familienzone-book-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 20px;
  padding-left: 10px;
  /* color: #333; */
}

/* Buchbeschreibung */
.familienzone-book-description {
  font-size: 1rem;
  /* color: #555; */
  margin-top: 10px;
  padding: 10px;
}

/* Action-Bereich für Button und Icon */
.book-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Amazon Button */
.btn-orange {
  background-color: #ff6600;
  color: #fff;
  padding: 2px 20px;
  border-radius: 30px;
  text-transform: uppercase;
  font-weight: bold;
  border: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  /* margin-left: 30px; */
}

.btn-orange:hover {
  background-color: #e65c00;
  /* Etwas dunkleres Orange bei Hover */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  /* Leichter Schatten bei Hover */
  text-decoration: none;
}

/* Sharing Icon */
.sharing-icon {
  font-size: 1.2rem;
  color: #ffffff;
  transition: color 0.3s ease;
  padding-right: 20px;
}

.sharing-icon:hover {
  color: #ff6600;
  /* Orange Farbe bei Hover */
}

.icon-link {
  color: #676767;
  /* Standardfarbe für Links */
  font-size: 24px;
  /* Größe der Icons */
  margin-right: 22px;
  margin-left: 22px;
  transition: color 0.3s;
}

.icon-link:hover {
  color: #ff821c;
  /* Farbe bei Hover */
  text-decoration: none;
  /* Keine Unterstreichung */
}

.malvorlagen-heading {
  text-transform: uppercase;
  color: #ffffff;
  /* Beispiel-Farbe */
  margin-bottom: 75px;
  text-shadow: 2px 2px 4px rgba(156, 21, 11, 0.6);
}

.malvorlage-title {
  font-size: 0.9rem;
  color: #000000;
  padding-top: 10px;
  margin-bottom: 8px;
}


/* .malvorlage-card {
  width: 200px; 
  height: 330px; 
  background-color: #ffffff; 
  border-radius: 10px; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
  overflow: hidden;
  text-align: center;
  margin: 20px auto; 
  padding: 10px;
} */

.malvorlage-card {
  width: 100%;
  height: auto;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin-bottom: 20px;
  padding: 10px;
}

.malvorlage-card img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767px) and (min-width: 540px) {
  .malvorlage-col {
    flex: 0 0 33.33%;
    /* Drei Karten nebeneinander */
    max-width: 33.33%;
  }
}

@media (max-width: 540px) {
  .malvorlage-col {
    flex: 0 0 33.33%;
    /* Drei Karten nebeneinander */
    max-width: 33.33%;
  }

  .icon-link {
    font-size: 14px;
    /* Größe der Icons */
    margin-right: 10px;
    margin-left: 10px;
  }
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  #section-familienzone-books h2.main-heading {
    font-size: 2rem;
    /* Kleinere Überschrift auf mobilen Geräten */
  }

  .familienzone-book-card {
    margin-bottom: 30px;
    /* Mehr Abstand zwischen den Karten auf kleineren Geräten */
  }

  .btn-orange {
    padding: 4px 12px;
    /* Kleinere Buttons auf mobilen Geräten */
  }

  .familienzone-book-title {
    font-size: 0.9rem;
  }

  .sharing-icon {
    font-size: 1.2rem;
    padding-top: 10px;
  }

  .book-action {
    display: block;
    /* Das ändert die Flexbox-Einstellungen für kleinere Bildschirme */
    text-align: center;
    /* Optional: Zentriert die Inhalte */
  }


  .familienzone-book-description {
    font-size: 0.9rem;
  }

  .familienzone-book-description.long {
    display: none;
  }

  .familienzone-book-description.short {
    display: block;
  }
}



@media (min-width: 769px) {
  .familienzone-book-description.short {
    display: none;
  }

  .familienzone-book-description.long {
    display: block;
  }
}


/* #################################################### */

/* datenschutz */

.datenschutz-container {
  background-image: url('../pict/bg/blue_grad.svg');
  background-size: cover;
  background-position: center;
  padding: 20px;
}

.data-heading {
  color: #fff;
  text-shadow: 2px 2px 5px #0a6da3;
  /* margin-top: 6rem; */
  margin-bottom: 4rem;
}

.data-text p {
  text-align: left;
  color: #fff;
  /* font-size: 14px;          */
  line-height: 1.6;

  margin-bottom: 2.5rem;
}

.grey-link {
  color: rgb(228, 228, 228);
  text-decoration: none;
  /* optional, um Unterstriche zu entfernen */
}

.grey-link:hover {
  color: darkgrey;
  /* optional für eine Hover-Farbe */
}



/* ################################################################## */

/* Modal Cookie-Banner */

/* Styles für das Cookie-Banner-Modal */
.modal-content {
  border-radius: 12px;
  /* Abgerundete Ecken */
  color: #000;
}

.modal-header {
  background-color: #f8f9fa;
  /* Hellgrauer Hintergrund */
  border-bottom: 1px solid #dee2e6;
}

.modal-footer {
  border-top: 1px solid #dee2e6;
}

.modal-title {
  font-weight: bold;
}

/* Anpassungen für Buttons */
.modal-footer .btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}



/* ########################### Puzzle  ################################ */
/* Grundstruktur für das Puzzle */
.puzzle-container {
  display: grid;
  margin: auto;
  max-width: 600px;
  gap: 2px;
  border: 2px solid #ddd;
  aspect-ratio: 3 / 2;
}

.puzzle-piece {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: grab;
  border: 1px solid #ddd;
}

#buttons {
  text-align: center;
  margin: 20px 0;
}

/* Styles für den Zünd-Button (KonfettiFX) */
.fire-button {
  padding: 15px 30px;
  font-size: 18px;
  color: #ffffff;
  background-color: #f94144;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s, transform 0.2s;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fire-button:hover {
  background-color: #f3722c;
  transform: scale(1.05);
}

.fire-button:active {
  transform: scale(0.95);
}

/* Bomben-Icon im Button */
.fire-button svg {
  width: 24px;
  height: 24px;
}

/* Bomben-Button Container */
.bomb-button-container {
  text-align: center;
  margin-top: 20px;
  /* Abstand zum Puzzle */
}

/* Gemeinsamer Konfetti-Container für beide Effekte */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
  /* Höheres Z-Index für Puzzle-Konfetti */
}

/* Erweiterte KonfettiFX Styles */
/* Allgemeiner Stil für Konfetti-Teilchen */
.confetti-particle {
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 1;
  will-change: transform, opacity;
  animation: explodeAndFall var(--animation-duration) forwards;
}

/* Zusätzliche Formen durch Clip-Path */
.polygon {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.star {
  clip-path: polygon(50% 0%,
      61% 35%,
      98% 35%,
      68% 57%,
      79% 91%,
      50% 70%,
      21% 91%,
      32% 57%,
      2% 35%,
      39% 35%);
}

/* Keyframes für die Explosion und den Fall */
@keyframes explodeAndFall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }

  20% {
    transform: translate3d(var(--translate-x), var(--translate-y), 0) rotate(var(--rotate-deg));
    opacity: 1;
  }

  100% {
    transform: translate3d(calc(var(--translate-x) + var(--sway-x)), calc(var(--translate-y) + var(--fall-distance)), 0) rotate(var(--rotate-deg));
    opacity: 0;
  }
}

/* Glitter-Effekt */
.glitter {
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.8);
  animation: glitterTwinkle var(--animation-duration) linear infinite;
}

@keyframes glitterTwinkle {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.5);
  }
}

/* Responsivität */
@media (max-width: 600px) {
  .puzzle-container {
    max-width: 100%;
    /* aspect-ratio: auto; */
  }

  .fire-button {
    padding: 10px 20px;
    font-size: 16px;
  }
}