@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
.ref-card{transform-style:preserve-3d;transition:transform 0.15s ease,border-color 0.3s,box-shadow 0.3s}

@keyframes aurora-pulse { 0%,100%{opacity:0.25} 50%{opacity:0.35} }


/* === CSS Layout Fixes 2026-03-23 === */

/* 1. Hero padding-right Fix for ~1024px */
@media (max-width: 1100px) {
  .hero { padding-right: 40% !important; }
}
@media (max-width: 768px) {
  .hero { padding-right: 1.5rem !important; }
}

/* 2. Section-Padding Konsistenz Desktop */
@media (min-width: 1024px) {
  section[style*="padding"] { padding-left: 5% !important; padding-right: 5% !important; }
}

/* 3. Technologie-Partner Section auf Mobile */
@media (max-width: 600px) {
  [style*="gap:2rem 3rem"] { gap: 1rem !important; }
}
@media (max-width: 768px) {
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 480px) {
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }
}

/* 4. BA-Slider Handle Touch-Target vergroessern */
#baHandle > div[style*="width:40px"][style*="height:40px"],
#baHandle > div[style*="width: 40px"][style*="height: 40px"] {
  width: 48px !important; height: 48px !important; min-width: 48px; min-height: 48px;
}

/* 5. Sticky CTA Desktop max-width */
@media (min-width: 1024px) {
  #stickyCta > div, #stickyCta { max-width: 960px; margin-left: auto; margin-right: auto; }
}

/* 6. Footer-Grid Tablet */
@media (min-width: 801px) and (max-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* 7. Kontrast-Fixes robuster */
.hero-stats span, .hero-stats p,
#baSlider span[style*="rgba(255,255,255,0.6)"] {
  color: rgba(255,255,255,0.75) !important;
}

/* 8. Ratgeber letzte Row Fix */
@media (min-width: 1024px) {
  [id="ratgeber"] > div > div[style*="grid"] > div:last-child,
  [id="wissen"] > div > div[style*="grid"] > div:last-child {
    grid-column: span 2;
  }
}

/* 9. App-Rechner cards responsive */

/* FIX 8: Ratgeber mobile */
@media (max-width: 768px) {
  #ratgeber > .container > div[style*="grid"] ~ div[style*="grid"] { display: none !important; }
  #ratgeber.show-all > .container > div[style*="grid"] { display: block !important; }
  .ratgeber-show-all-wrap { display: block !important; }
}
/* FIX 9: Wissen sichtbar auf Mobile als 2-Spalten-Grid */
/* #wissen angezeigt via Mobile-First Block oben */
/* FIX 10: Einzugsgebiet city-tags mobile */
@media (max-width: 768px) {
  #einzugsgebiet .city-tag:nth-child(n+9) { display: none !important; }
}
/* FIX 11: App-Rechner cards mobile — visible and full-width */
@media (max-width: 400px) {
  #app-rechner [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}
/* FIX 12: Sticky CTA close button touch target */
#stickyCta button { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
/* FIX 13: Hero canvas at 900–1100px (Split-Layout aktiv) */
@media (min-width: 900px) and (max-width: 1100px) {
  .hero canvas { width: 45% !important; }
  .hero { padding-right: 42% !important; }
}
/* Bei 768–899px: kein canvas-Split, volle Breite */
@media (min-width: 768px) and (max-width: 899px) {
  .hero canvas { display: none !important; }
}

/* ── DSGVO/Mobile: Cookie Banner stacked layout + bigger buttons ── */
@media (max-width: 600px) {
  #cookieBanner, .cookie-banner, [id*="cookie"] {
    flex-direction: column !important;
    gap: 0.8rem !important;
    padding: 1rem !important;
  }
  #cookieBanner button, .cookie-banner button, [id*="cookie"] button {
    min-height: 44px !important;
    font-size: 0.95rem !important;
    width: 100% !important;
  }
}

/* ── Trust bar text: bigger on mobile ── */
@media (max-width: 768px) {
  .partner-bar, .partner-track, .partner-logo {
    font-size: 0.82rem !important;
  }
}

/* ── Gallery: single column on very small screens ── */
@media (max-width: 400px) {
  #referenzen-preview > div > div[style*="grid"] {
    grid-template-columns: 1fr !important;
  }
}