/* Grundlegendes Layout und Perspektive */
.logo-carousel-3d {
  position: relative;
  width: 100%;
  max-width: 100%; /* Volle Breite wie die Karte */
  height: 200px; /* Reduzierte Höhe */
  margin: 20px auto; /* Reduzierte Außenabstände */
  perspective: 1200px; /* Reduzierte Perspektive für moderateren 3D-Effekt */
  overflow: hidden;
  transform-style: preserve-3d; /* Wichtig für korrekte 3D-Transformationen */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Wrapper-Styling */
.carousel-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(-300px); /* Optimierter Z-Wert für bessere Balance bei breiterer Darstellung */
  perspective: 1100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: none; /* Keine Breitenbegrenzung */
  z-index: 1; /* Sicherstellen, dass der Wrapper einen z-index hat */
}

/* Logo-Basis-Styling */
.carousel-wrapper img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px; /* Größere Logos für bessere Sichtbarkeit */
  height: 60px;
  object-fit: contain;
  cursor: pointer;
  border-radius: 7px;
  padding: 9px;
  background-color: rgba(255, 255, 255, 0.975); /* Fast vollständig undurchsichtig */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), 
              opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); /* Verbesserte Transition-Definition */
  will-change: transform, opacity, z-index;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  image-rendering: -webkit-optimize-contrast; /* Für Chrome/Safari */
  image-rendering: crisp-edges; /* Für Firefox */
  transform-style: preserve-3d; /* Wichtig für korrekte 3D-Transformationen */
  transform-origin: center center;
  perspective: 1000px; /* Zusätzliche Perspektive pro Element */
  pointer-events: auto; /* Sicherstellen, dass Mouse-Events funktionieren */
}

/* Logos mit schwarzem Hintergrund - höhere Spezifität */
.carousel-wrapper img.black-bg {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Positionsspezifische Stile */
.carousel-wrapper img.center {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 0 20px rgba(225, 119, 9, 0.7);
  border: 2px solid rgba(225, 119, 9, 0.3);
  background-color: rgba(255, 255, 255, 1);
  filter: drop-shadow(0 0 10px rgba(225, 119, 9, 0.6));
  z-index: 999 !important;
}

.carousel-wrapper img.adjacent {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 0 10px rgba(225, 119, 9, 0.4);
  border: 1px solid rgba(225, 119, 9, 0.2);
  background-color: rgba(255, 255, 255, 0.98);
  filter: drop-shadow(0 0 8px rgba(225, 119, 9, 0.3));
}

.carousel-wrapper img.outer {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 0 8px rgba(225, 119, 9, 0.3);
  border: 1px solid rgba(225, 119, 9, 0.15);
  background-color: rgba(255, 255, 255, 0.97);
  filter: drop-shadow(0 0 5px rgba(225, 119, 9, 0.2));
}

/* Optimierungen für verschiedene Bildschirmgrößen */
@media (min-width: 1200px) {  /* Desktop-spezifische Optimierungen */  .logo-carousel-3d {
    height: 220px; /* Erhöhte Höhe für Desktop für bessere Verteilung */
    margin: 0 auto; /* Entfernung des vertikalen Abstands */
    margin-top: 0; /* Kein Abstand zur Karte - direkt darunter */
    width: 100%; /* Volle Breite wie die Karte */
    max-width: 100%; /* Keine Begrenzung der Breite */
    margin-bottom: 5px; /* Minimaler Abstand nach unten */
  }
  /* Speziell für Desktop die Karte und das Karussell ohne Abstand */
  .footer-maps-section + .footer-logos-section {
    margin-top: -5px !important; /* Negativer Abstand mit höchster Priorität */
    padding-bottom: 10px; /* Minimaler Abstand nach unten */
    margin-bottom: 0; /* Kein Margin unten */
  }
  
  .carousel-wrapper img {
    width: 70px; /* Noch kleinere Bilder für Desktop */
    height: 52px;
    padding: 8px;
  }
    .footer-logos-section {
    width: 100%;
    max-width: 100%; /* Volle verfügbare Breite nutzen */
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* Tablet-Größen */
@media (min-width: 769px) and (max-width: 1199px) {  .logo-carousel-3d {
    height: 180px; /* Reduzierte Höhe für Tablets */
    perspective: 900px;
    max-width: 100%; /* Volle Breite für Tablets */
    width: 100%;
    margin: 0 auto; /* Entfernung des vertikalen Abstands */
    margin-top: 0; /* Kein Margin oben - direkt unter der Karte */
  }
  
  .carousel-wrapper img {
    width: 65px; /* Kleinere Bilder für Tablets */
    height: 48px;
    padding: 8px;
  }
  
  .carousel-wrapper {
    transform: translateZ(-220px); /* Angepasster Z-Wert für Tablets */
  }
  
  /* Verbesserte Abstände für Tablets */
  .footer-logos-section {
    padding: 10px 0;
  }
  
  .footer-section h4 {
    margin-bottom: 10px;
  }
}

/* Mobile Ansicht */
@media (max-width: 768px) {  .logo-carousel-3d {
    height: 155px; /* Angepasste Höhe für Mobile */
    perspective: 800px;
    margin: -15px auto 10px; /* Stärkerer negativer Abstand oben für engere Platzierung */
    width: 100%; /* Volle Breite für bessere Logo-Verteilung */
  }
    .carousel-wrapper img {
    width: 48px; /* Angepasst für 5 Logos in mobile Ansicht */
    height: 36px;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1), 0 0 10px rgba(225, 119, 9, 0.4); /* Orange Glow-Effekt */
    border: 1px solid rgba(225, 119, 9, 0.2);
  }
    /* Zusätzliche mobile Optimierungen */
  .carousel-wrapper {
    transform: translateZ(-200px); /* Angepasster Z-Wert für größere Darstellung und bessere Verteilung */
    width: 100%; /* Volle Breite nutzen */
  }
  /* Mobile-spezifische Stil-Optimierungen */  .carousel-wrapper img.center {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 12px rgba(225, 119, 9, 0.8);
    border-width: 1px; /* Dünnerer Rahmen auf Mobile */
    border-color: rgba(225, 119, 9, 0.4);
    filter: drop-shadow(0 0 8px rgba(225, 119, 9, 0.7));
  }
    .carousel-wrapper img.adjacent, 
  .carousel-wrapper img.outer {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 8px rgba(225, 119, 9, 0.5);
    border-color: rgba(225, 119, 9, 0.25);
    filter: drop-shadow(0 0 6px rgba(225, 119, 9, 0.4));
  }
  /* Verbesserte Footer-Darstellung auf Mobile */
  .footer-container {
    flex-direction: column;
  }
  
  .footer-section {
    width: 100%;
    margin-bottom: 0; /* Kein Abstand zwischen Footer-Sektionen */
  }
    .footer-maps-logos-wrapper {
    flex-direction: column;
    display: flex;
    /* Ändere die Reihenfolge: Logo-Karussell ganz unten */
    flex-direction: column;
    gap: 0; /* Kein Abstand zwischen den Flex-Elementen */
  }
    /* Änderung der Anzeigereihenfolge - Karussell ganz nach unten */
  .footer-logos-section {
    order: 2; /* Erscheint nach der Karte */
    position: relative;
  }
  
  .footer-maps-section {
    order: 1; /* Erscheint vor dem Karussell */
  }
  
  /* Keine Überschrift mehr für den Logos-Bereich */
  .footer-logos-section::before {
    content: "";
    display: none;
  }  /* Anpassung für Mobile-Footer mit Logos am Ende */
  .footer-logos-section {
    margin: 0;
    padding: 0;
    margin-top: -10px; /* Negativer Abstand für engere Platzierung */
    padding-bottom: 15px; /* Reduzierter Abstand nach unten zum Seitenende */
    border-top: 1px solid rgba(225, 119, 9, 0.3); /* Leichter farbiger Trenner zur Karte */
    padding-top: 0; /* Kein Abstand zum Trenner */
  }  .logo-carousel-section {
    padding: 0;
    margin-top: -5px; /* Negativer Abstand zum oberen Element */
    position: relative; /* Für bessere Positionierung */
    width: 100%; /* Volle Breite für die mobile Ansicht */
    display: flex;
    justify-content: center;
  }
    .footer-section h4 {
    margin-top: 10px;
    margin-bottom: 5px;
  }
  
  /* Verbesserte Darstellung und Positionierung im Footer für mobile Geräte */
  .footer-section:last-child {
    margin-bottom: 0;
  }
  .footer-maps-section {
    margin-bottom: -10px; /* Negativer Abstand für engere Platzierung */
  }
  
  /* Angemessener Abstand zwischen Karte und Karussell */
  .footer-maps-section + .footer-logos-section {
    margin-top: 0; /* Kein Margin */
  }
}

/* Footer-Layout Optimierungen - Globale Anpassungen für alle Bildschirmgrößen */
.footer-logos-section {
  width: 100%;
  max-width: 100%;
  padding: 0; /* Kein Padding für engeren Abstand zur Karte */
  margin: 0 auto;
  box-sizing: border-box; /* Stellt sicher, dass Padding und Border in die Breite einberechnet werden */
}

/* Globale Anpassungen für das Verhältnis zwischen Karte und Karussell */
.footer-maps-section + .footer-logos-section {
  margin-top: -10px; /* Negativer Abstand für engere Platzierung */
}

/* Google Maps Container für alle Bildschirmgrößen anpassen */
#google-maps-container {
  margin-bottom: 0 !important; /* Neutraler Abstand, damit kein Überlappen stattfindet */
  width: 100% !important;
  height: 350px !important;
  position: relative !important;
  display: block !important;
}

/* Der Maps-Section Container soll negativen Abstand haben */
.footer-maps-section {
  margin-bottom: -15px; /* Negativer Margin für alle Bildschirmgrößen */
  padding-bottom: 0; /* Kein Padding unten für engeren Abstand zum Karussell */
}

.logo-carousel-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0; /* Kein Padding für engeren Abstand zur Karte */
  max-width: 100%; /* Volle Breite nutzen */
}

/* Verbesserte Container-Struktur */
.footer-maps-logos-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Hover-Effekte für Desktop aktiviert mit Orange Glow */
@media (min-width: 769px) {
  .carousel-wrapper img:hover {
    transform: translate(-50%, -50%) translateZ(20px) scale(1.1);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), 0 0 15px rgba(225, 119, 9, 0.8);
    border-color: rgba(225, 119, 9, 0.4);
    filter: drop-shadow(0 0 12px rgba(225, 119, 9, 0.7));
    z-index: 1000 !important;
  }
  
  .carousel-wrapper img.center:hover {
    transform: translate(-50%, -50%) translateZ(30px) scale(1.15) !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22), 0 0 20px rgba(225, 119, 9, 0.9) !important;
    border-color: rgba(225, 119, 9, 0.5);
    filter: drop-shadow(0 0 15px rgba(225, 119, 9, 0.8));
  }
}

/* Positionsspezifische Hover-Effekte für Mobile deaktiviert */
@media (max-width: 768px) {
  .carousel-wrapper img:hover,
  .carousel-wrapper img.hover-active {
    transform: none;
  }
}
.carousel-wrapper img.outer.hover-active {
  transform: translate(-50%, -50%) translateZ(250px) scale(1.04) !important;
}
*/

/* Forciertes Ausblenden - wichtig für die Vermeidung von Durchscheinen */
.carousel-wrapper img[data-position="hidden"],
.carousel-wrapper img[style*="translateZ(-"] {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
  pointer-events: none !important;
}

/* Hover-aktive Elemente - DEAKTIVIERT */
/*
.carousel-wrapper img.hover-active {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  pointer-events: auto !important;
}
*/