/* New, independent Referenzen section (different design + system) */

#referenzen-neu {
  position: relative;
  background: #ffffff; /* white section background */
  font-family: 'Inter', system-ui, sans-serif; /* match site font */
  overflow-x: hidden; /* prevent any accidental horizontal overflow */
}

/* Section spacing and background */
#referenzen-neu .section-inner {
  max-width: 1400px; /* increased from 1280px */
  margin: 0 auto;
  padding: 0 1.5rem; /* extra padding for shadows */
}

/* Filter buttons bar */
#referenzen-neu .r2-filter {
  display: inline-flex;
  background: #F3F4F6; /* gray-100 */
  padding: 0.25rem;
  border-radius: 0.75rem;
  position: relative;
}

#referenzen-neu .r2-filter .r2-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: calc(50% - 6px);
  left: 4px;
  background: linear-gradient(135deg, #3370FF 0%, #4080FF 100%);
  border-radius: 0.6rem;
  transition: transform 250ms ease;
  z-index: 0;
}

#referenzen-neu .r2-filter.business .r2-pill {
  transform: translateX(100%);
}

#referenzen-neu .r2-filter button {
  position: relative;
  z-index: 1;
  padding: 0.6rem 1rem;
  font-weight: 600;
  border-radius: 0.6rem;
}

#referenzen-neu .r2-filter button.active {
  color: #fff;
}

#referenzen-neu .r2-filter button:not(.active) {
  color: #4B5563; /* gray-600 */
}

/* Slider viewport using fade pages (no transforms for clicks) */
#referenzen-neu .r2-row {
  position: relative;
}

#referenzen-neu .r2-viewport {
  position: relative;
  min-height: 45rem; /* Increased for full-width showcase cards */
  overflow: visible;
  padding: 1rem 0;
}

#referenzen-neu .r2-pages {
  position: relative;
  width: 100%;
}

#referenzen-neu .r2-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateX(30px) scale(0.97);
  pointer-events: none;
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

#referenzen-neu .r2-page[data-active="true"] {
  position: relative;
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  z-index: 1;
}

/* Simplified card animation - always visible to prevent disappearing */
#referenzen-neu .r2-page .r2-card {
  opacity: 1; /* Always visible */
  transform: translateY(0) scale(1); /* Always in position */
}

#referenzen-neu .r2-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding: 0 0.5rem;
  max-width: 100%;
}

@media (min-width: 1024px) {
  #referenzen-neu .r2-grid {
    grid-template-columns: 1fr; /* Single column, cards take full width */
    gap: 4rem;
    max-width: 100%;
  }
}

/* Card design: Full-width showcase */
#referenzen-neu .r2-card {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -3px rgba(0, 0, 0, 0.05);
  transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(0) scale(1);
  will-change: transform, box-shadow;
  opacity: 1;
  max-width: 1200px; /* Increased max width for larger showcase */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 1024px) {
  #referenzen-neu .r2-card {
    grid-template-columns: 1.5fr 1fr; /* Image left, content right */
    gap: 0;
  }
}

#referenzen-neu .r2-card:hover {
  transform: translateY(-8px) scale(1.005);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 10px 20px -8px rgba(0, 0, 0, 0.08);
  border-color: #D1D5DB;
}

#referenzen-neu .r2-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 30px -5px rgba(0, 0, 0, 0.12), 0 8px 12px -5px rgba(0, 0, 0, 0.06);
  border-color: #E5E7EB;
}

#referenzen-neu .r2-media {
  height: 24rem; /* Good height for mobile */
  background: #F8FAFC;
  display: block;
  position: relative;
  overflow: hidden;
  order: 1; /* Image first on mobile */
}

@media (min-width: 1024px) {
  #referenzen-neu .r2-media {
    height: auto; /* Full height on desktop */
    min-height: 500px; /* Minimum height for showcase */
    order: 0; /* Image left on desktop */
  }
}

#referenzen-neu .r2-media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two columns for small images */
  grid-template-rows: 2fr 1fr; /* Large top, smaller bottom row */
  gap: 0.75rem;
  padding: 1rem;
  height: 100%;
}

@media (min-width: 1024px) {
  #referenzen-neu .r2-media-grid {
    gap: 1rem;
    padding: 1.5rem;
  }
}

/* Main large image - spans full width on top */
#referenzen-neu .r2-media-grid .r2-lg {
  grid-column: 1 / -1; /* Spans both columns */
  grid-row: 1;
  border-radius: 1rem;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15);
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  min-height: 280px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  -ms-interpolation-mode: bicubic;
}

/* Smaller images side by side below */
#referenzen-neu .r2-media-grid .r2-sm {
  grid-row: 2;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.12);
  background-size: contain !important; /* Changed from cover to contain for better quality */
  background-repeat: no-repeat !important;
  background-position: center center !important; /* Center for better fit */
  min-height: 100px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  -ms-interpolation-mode: bicubic;
  background-color: #F8FAFC; /* Background color to fill gaps */
}

#referenzen-neu .r2-media-grid .r2-sm:first-of-type {
  grid-column: 1;
}

#referenzen-neu .r2-media-grid .r2-sm:last-of-type {
  grid-column: 2;
}

@media (min-width: 1024px) {
  #referenzen-neu .r2-media-grid .r2-lg {
    min-height: 350px;
  }
  
  #referenzen-neu .r2-media-grid .r2-sm {
    min-height: 140px;
  }
}

#referenzen-neu .r2-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center vertically for better balance */
  gap: 1.25rem; /* Consistent spacing between all elements */
  order: 2; /* Content after image on mobile */
  min-height: 400px; /* Ensure minimum height for proper spacing */
}

@media (min-width: 1024px) {
  #referenzen-neu .r2-content {
    padding: 3rem 2.5rem; /* Better padding for desktop */
    order: 1; /* Content right on desktop */
    min-height: 500px; /* More height on desktop */
    gap: 1.5rem; /* Tighter spacing between elements on desktop */
  }
}

#referenzen-neu .r2-title {
  font-size: 2rem; /* Larger title for prominence */
  font-weight: 700;
  color: #1F2937; /* Darker for better readability */
  line-height: 1.3;
  margin-bottom: 0; /* Removed, gap handles spacing */
}

@media (min-width: 1024px) {
  #referenzen-neu .r2-title {
    font-size: 2.5rem; /* Even larger on desktop */
    line-height: 1.2;
    margin-bottom: 0; /* Removed, gap handles spacing */
  }
}

#referenzen-neu .r2-badge {
  font-size: 0.75rem; /* text-sm = 0.875rem in original, but 0.75rem looks cleaner */
  font-weight: 600; /* match original: font-semibold = 600 */
  padding: 0.25rem 0.5rem; /* match original spacing */
  border-radius: 9999px;
  box-shadow: none; /* remove shadow to match original badges */
}

#referenzen-neu .r2-badge.sport {
  color: #1E40AF; /* blue-800 */
  background: #DBEAFE; /* blue-100 */
}

#referenzen-neu .r2-badge.musik {
  color: #7C3AED; /* purple-600 */
  background: #EDE9FE; /* purple-100 */
}

#referenzen-neu .r2-badge.verein {
  color: #047857;
  background: #D1FAE5; /* match original: bg-green-100 */
}

#referenzen-neu .r2-badge.business {
  color: #1D4ED8;
  background: #DBEAFE; /* match original: similar to bg-blue-100 */
}

#referenzen-neu .r2-desc {
  color: #4B5563; /* Better readability */
  line-height: 1.65; /* Balanced line height */
  font-size: 1.125rem; /* Larger font size for better readability */
  margin-bottom: 0; /* Removed, gap handles spacing */
}

@media (min-width: 1024px) {
  #referenzen-neu .r2-desc {
    font-size: 1.25rem; /* Even larger on desktop */
    line-height: 1.7;
    margin-bottom: 0; /* Removed, gap handles spacing */
  }
}

#referenzen-neu .r2-chip {
  font-size: 0.875rem; /* Good size for chips */
  font-weight: 500;
  padding: 0.5rem 0.875rem; /* Balanced padding */
  border-radius: 9999px;
  background: #F3F4F6;
  color: #374151;
  border: none;
  transition: all 200ms ease;
}

#referenzen-neu .r2-chip:hover {
  background: #E5E7EB;
  transform: translateY(-1px);
}

#referenzen-neu .r2-cta {
  font-weight: 600;
  border-radius: 0.875rem;
  padding: 1.125rem 2.25rem; /* Even larger button for better visibility */
  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px -2px rgba(51, 112, 255, 0.3);
  font-size: 1.125rem; /* Larger text */
  margin-top: 0; /* No extra margin, controlled by flex spacing */
}

#referenzen-neu .r2-cta.primary {
  background: linear-gradient(135deg, #3370FF 0%, #4080FF 100%);
  color: white;
}

#referenzen-neu .r2-cta.primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -6px rgba(51, 112, 255, 0.4), 0 6px 12px -4px rgba(51, 112, 255, 0.15);
}

/* Controls */
#referenzen-neu .r2-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

#referenzen-neu .r2-arrow {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: white;
  border: 1px solid #F3F4F6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}

#referenzen-neu .r2-arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(51, 112, 255, 0.05), rgba(51, 112, 255, 0.1));
  opacity: 0;
  transition: opacity 400ms ease;
}

#referenzen-neu .r2-arrow:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 15px -5px rgba(0, 0, 0, 0.08);
  border-color: #E5E7EB;
}

#referenzen-neu .r2-arrow:hover::before {
  opacity: 1;
}

#referenzen-neu .r2-arrow:active {
  transform: translateY(-1px) scale(1.02);
  transition: all 150ms ease;
}

#referenzen-neu .r2-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

#referenzen-neu .r2-arrow svg {
  position: relative;
  z-index: 1;
  transition: transform 300ms ease;
}

#referenzen-neu .r2-arrow:hover svg {
  transform: scale(1.1);
}

#referenzen-neu .r2-indicator {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: white;
  border: 1px solid #F3F4F6;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
  font-size: 0.9rem;
}

/* Dot indicators */
#referenzen-neu .r2-dot {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background: #D1D5DB;
  transition: all 300ms ease;
  border: 2px solid transparent;
}

#referenzen-neu .r2-dot:hover {
  background: #9CA3AF;
  transform: scale(1.15);
}

#referenzen-neu .r2-dot.active {
  background: #3370FF;
  width: 32px;
  border-color: #3370FF20;
}

/* Mobile optimizations for Referenzen */
@media (max-width: 768px) {
  /* Hide desktop arrows on mobile */
  #referenzen-neu .r2-row > .r2-arrow {
    display: none;
  }
  
  /* Larger dots on mobile */
  #referenzen-neu .r2-dot {
    width: 16px;
    height: 16px;
  }
  
  #referenzen-neu .r2-dot.active {
    width: 36px;
  }
}

/* Desktop: Hide mobile navigation arrows (the ones next to dots) */
@media (min-width: 769px) {
  #referenzen-neu [data-r2-prev-mobile],
  #referenzen-neu [data-r2-next-mobile] {
    display: none !important;
  }
}

@media (min-width: 769px) {
  #referenzen-neu .mobile-nav-container {
    display: none;
  }
}

/* Clickable images cursor */
.r2-image-clickable {
  cursor: zoom-in;
  transition: transform 200ms ease, filter 200ms ease;
}

.r2-image-clickable:hover {
  transform: scale(1.02);
  filter: brightness(1.05);
}

/* If any indicator exists inside the slider row, hide it to keep the bottom-only placement */
#referenzen-neu .r2-row .r2-indicator { display: none !important; }