/* CSS Document */

body {
  box-sizing: border-box;
}
:root {
  --accent: #1e40af;
  --accent-light: #dbeafe;
  --text-primary: #1a1a1a;
  --text-secondary: #4a5568;
  --bg-light: #fafafa;
  --warning: #d97706;
}
.font-editorial { font-family: "Google Sans", sans-serif; }
.font-body { font-family: "Google Sans", sans-serif; }
.accent-gradient { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); }
.testsieger-glow { box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15), 0 25px 50px -12px rgba(30, 64, 175, 0.25); }
.smooth-shadow { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); }
.hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeInUp 0.6s ease forwards; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.h-18 { height: 5rem;}

.hero-plissee-visual {
	/* Hintergrundbild */
	background-image: url("../images/plissee_test_reports_2026.webp") !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-position: center 55%;
	padding: 1.5rem;

	/* Fallback / Untergrund */
	background-color: #ffffff;

	/* Wichtig: das Gradient aus Tailwind „neutralisieren“ */
	background-blend-mode: normal;
}

@media (max-width: 1024px) {
  .hero-plissee-visual {
    min-height: 320px;
  }
}

@media (max-width: 640px) {
  .hero-plissee-visual {
    min-height: 240px;
  }
}