/* === Infoleiste Custom Styles === */
.icon {
  font-size: 1rem; /* Basisgröße */
}

@media (min-width: 640px) {
  .icon {
    font-size: 1.2rem;
  }
}
@media (min-width: 768px) {
  .icon {
    font-size: 1.4rem;
  }
}
@media (min-width: 1024px) {
  .icon {
    font-size: 1.6rem;
  }
}

/* optional etwas Abstand zwischen Icon und Text */
.label-text {
  margin-left: 0.25rem;
}

.info-bar-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  text-align: center;
  font-size: 0.875rem; /* sm */
}

@media (min-width: 640px) {
  .info-bar-item {
    font-size: 0.95rem;
  }
}

/* ===== FACHPARTNER BLAUE FARBPALETTE ======================================= */
.fachpartner-blue {
  --primary: #2563eb; /* blue-600 */
  --primary-hover: #1d4ed8; /* blue-700 */
  --primary-light: #dbeafe; /* blue-100 */
  --primary-lighter: #eff6ff; /* blue-50 */
  --primary-text: #1e40af; /* blue-800 */
  --primary-ring: #3b82f6; /* blue-500 */
}

.fachpartner-blue .btn-primary {
  background-color: var(--primary);
  color: white;
  transition: background-color 0.2s ease;
}

.fachpartner-blue .btn-primary:hover {
  background-color: var(--primary-hover);
}

.fachpartner-blue .btn-secondary {
  border: 2px solid var(--primary);
  color: var(--primary);
  background-color: transparent;
  transition: all 0.2s ease;
}

.fachpartner-blue .btn-secondary:hover {
  background-color: var(--primary-lighter);
  color: var(--primary-text);
}

.fachpartner-blue .text-primary {
  color: var(--primary-text);
}

.fachpartner-blue .bg-primary-light {
  background-color: var(--primary-lighter);
}

.fachpartner-blue .ring-primary {
  --tw-ring-color: var(--primary);
}

.fachpartner-blue .border-primary {
  border-color: var(--primary);
}

.fachpartner-blue .focus-ring-primary:focus {
  --tw-ring-color: var(--primary-ring);
  border-color: var(--primary);
}

/* ===== REGIONEN-SPEZIFISCHE SECTIONS ======================================= */
/* Hauptsektion für regionsspezifischen Content */
.region-specific-section {
  background-color: #f9fafb; /* bg-gray-50 */
  padding: 8rem 0; /* py-32 */
  scroll-margin-top: 0.75rem; /* scroll-mt-3 */
}

@media (min-width: 768px) {
  .region-specific-section {
    scroll-margin-top: 3rem; /* md:scroll-mt-12 */
  }
}

/* Container für optimalen Inhalt */
.region-container {
  max-width: 72rem; /* max-w-6xl */
  margin: 0 auto;
  padding: 0 1.5rem; /* px-6 */
}

/* Einleitung mit Titel und Beschreibung */
.region-intro {
  text-align: center;
  margin-bottom: 5rem; /* mb-20 */
}

.region-title {
  font-size: 2.25rem; /* text-4xl */
  line-height: 1.25; /* leading-tight */
  font-weight: 800; /* font-extrabold */
  color: #111827; /* text-gray-900 */
  margin-bottom: 2rem; /* mb-8 */
}

@media (min-width: 640px) {
  .region-title {
    font-size: 3rem; /* sm:text-5xl */
    line-height: 1;
  }
}

.region-description {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75; /* leading-relaxed */
  color: #374151; /* text-gray-700 */
  max-width: 56rem; /* max-w-4xl */
  margin: 0 auto;
}

/* Grid-Layout für die Hauptcards */
.region-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem; /* gap-10 */
  margin-bottom: 5rem; /* mb-20 */
}

@media (min-width: 1024px) {
  .region-cards-grid {
    grid-template-columns: repeat(2, 1fr); /* lg:grid-cols-2 */
  }
}

/* Einzelne Cards (Vorteile, Kosten & Förderungen) */
.region-card {
  background-color: #ffffff; /* bg-white */
  border: 1px solid #e5e7eb; /* border border-gray-200 */
  border-radius: 1.5rem; /* rounded-3xl */
  padding: 2.5rem; /* p-10 */
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
  transition: all 0.3s ease;
}

.region-card:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* hover:shadow-2xl */
  transform: translateY(-2px);
}

/* Icon-Container und Überschriften */
.region-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem; /* mb-6 */
}

.region-icon-container {
  width: 4rem; /* w-16 */
  height: 4rem; /* h-16 */
  border-radius: 50%; /* rounded-full */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.5rem; /* mr-6 */
  flex-shrink: 0;
}

.region-icon-container.green {
  background-color: #dcfce7; /* bg-green-100 */
}

.region-icon-container.blue {
  background-color: #dbeafe; /* bg-blue-100 */
}

.region-icon {
  width: 2rem; /* w-8 */
  height: 2rem; /* h-8 */
}

.region-icon.green {
  color: #16a34a; /* text-green-600 */
}

.region-icon.blue {
  color: #2563eb; /* text-blue-600 */
}

.region-card-title {
  font-size: 1.5rem; /* text-2xl */
  line-height: 1.25; /* leading-tight */
  font-weight: 700; /* font-bold */
  color: #111827; /* text-gray-900 */
}

/* Card-Inhalte */
.region-card-content {
  color: #374151; /* text-gray-700 */
  line-height: 1.625; /* leading-relaxed */
}

.region-card-content p {
  margin-bottom: 0;
}

/* Spezielle Styling für "Kosten & Förderungen" */
.region-card-content .space-y-6 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* space-y-6 */
}

.region-card-content .text-gray-600 {
  color: #4b5563; /* text-gray-600 */
  font-size: 1rem; /* text-base */
  line-height: 1.625; /* leading-relaxed */
}

/* Links in den Cards */
.region-card-content a {
  color: #16a34a; /* text-green-600 */
  text-decoration: underline;
  transition: color 0.2s ease;
}

.region-card-content a:hover {
  color: #15803d; /* hover:text-green-700 */
}

/* "Warum PV-Anlagen-Vergleich" Section */
.region-why-section {
  background-color: #ffffff; /* bg-white */
  border: 1px solid #e5e7eb; /* border border-gray-200 */
  border-radius: 1.5rem; /* rounded-3xl */
  padding: 2.5rem; /* p-10 */
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
  transition: all 0.3s ease;
  margin-bottom: 5rem; /* mb-20 */
}

.region-why-section:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* hover:shadow-2xl */
  transform: translateY(-2px);
}

.region-why-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) {
  .region-why-content {
    grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
  }
}

.region-why-content p {
  color: #374151; /* text-gray-700 */
  line-height: 1.625; /* leading-relaxed */
  margin-bottom: 0;
}

/* "Weitere Regionen" Section */
.region-other-regions {
  text-align: center;
}

.region-other-regions h3 {
  font-size: 1.875rem; /* text-3xl */
  line-height: 2.25rem;
  font-weight: 700; /* font-bold */
  color: #111827; /* text-gray-900 */
  margin-bottom: 2.5rem; /* mb-10 */
}

.region-regions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) {
  .region-regions-grid {
    grid-template-columns: repeat(3, 1fr); /* md:grid-cols-3 */
  }
}

/* Region-Link Cards */
.region-link-card {
  background-color: #ffffff; /* bg-white */
  border: 1px solid #e5e7eb; /* border border-gray-200 */
  border-radius: 0.75rem; /* rounded-xl */
  padding: 1.5rem; /* p-6 */
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}

.region-link-card:hover {
  border-color: #86efac; /* hover:border-green-300 */
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1); /* hover:shadow-lg */
  transform: scale(1.05); /* hover:scale-105 */
}

.region-link-content {
  display: flex;
  align-items: center;
  gap: 1rem; /* space-x-4 */
}

.region-link-icon {
  width: 2.5rem; /* w-10 */
  height: 2.5rem; /* h-10 */
  background-color: #dcfce7; /* bg-green-100 */
  border-radius: 50%; /* rounded-full */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.region-link-card:hover .region-link-icon {
  background-color: #bbf7d0; /* group-hover:bg-green-200 */
}

.region-link-icon svg {
  width: 1.25rem; /* w-5 */
  height: 1.25rem; /* h-5 */
  color: #16a34a; /* text-green-600 */
}

.region-link-text {
  flex: 1;
}

.region-link-title {
  font-weight: 600; /* font-semibold */
  color: #111827; /* text-gray-900 */
  font-size: 1.125rem; /* text-lg */
  transition: color 0.2s ease;
  display: block;
  margin-bottom: 0.25rem;
}

.region-link-card:hover .region-link-title {
  color: #15803d; /* group-hover:text-green-700 */
}

.region-link-description {
  color: #4b5563; /* text-gray-600 */
  font-size: 1rem; /* text-base */
  line-height: 1.625; /* leading-relaxed */
  margin: 0;
}

/* Responsive Anpassungen */
@media (max-width: 640px) {
  .region-specific-section {
    padding: 4rem 0; /* Reduzierte Abstände auf Mobile */
  }

  .region-container {
    padding: 0 1rem;
  }

  .region-title {
    font-size: 2rem;
  }

  .region-description {
    font-size: 1.125rem;
  }

  .region-card,
  .region-why-section {
    padding: 1.5rem; /* Reduziertes Padding auf Mobile */
  }

  .region-icon-container {
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
  }

  .region-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* ===== STEP-10-Overlay ======================================= */
#step10Overlay {
  position: fixed !important; /* bleibt im Viewport */
  inset: 0 !important; /* füllt den Screen */
  z-index: 1000 !important; /* über Header / Burger / etc. */
  pointer-events: auto; /* blockt Klicks auf Seite */
}

/* Abdunklung + Blur: sitzt HINTER der Karte */
#step10Overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); /* 60 % Schwarz  → kannst du anpassen */
  backdrop-filter: blur(4px); /* leichter Weichzeichner */
  z-index: 0; /* unterhalb der Karte */
}

/* ===== Pop-up-Karte ========================================== */
#step10Overlay .popupCard {
  /* oder wähle deine Utility-Klassen */
  position: relative;
  z-index: 10; /* über dem Abdunklungs-Layer */
  background: #fff; /* 100 % deckend */
  border-radius: 1.25rem; /* ≈ rounded-2xl */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); /* kräftiger Schatten */
  outline: 1px solid rgb(37, 99, 235, 0.15); /* feine blaue Outline */
  padding: 2.5rem 2rem; /* großzügige Innenabstände */
  max-width: 40rem; /* ≈ Tailwind max-w-xl */
  width: 100%;
  animation: fadeIn 0.3s ease-out both;
}

/* sanftes Einblenden */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- Kartengrundlayout ---------- */
.box {
  @apply relative flex flex-col items-center justify-center gap-2
         w-full aspect-square                              /* immer Quadrat  */
         min-w-[110px] sm:min-w-[120px]                   /* feste Breite    */
         rounded-xl border border-gray-200 cursor-pointer
         text-center transition hover:shadow-sm;
}
.icon {
  @apply text-2xl sm:text-3xl text-slate-800 transition;
}
.txt {
  @apply text-[12px] sm:text-sm font-medium text-gray-800;
}

/* ---------- Grund-Box ---------- */
.box {
  @apply flex flex-col items-center justify-center gap-2
         w-full aspect-square min-w-[110px] sm:min-w-[120px]
         rounded-xl border border-gray-200 text-center
         cursor-pointer select-none transition hover:shadow-sm;
}
.icon {
  @apply text-2xl sm:text-3xl text-slate-800 transition;
}
.txt {
  @apply text-[12px] sm:text-sm font-medium text-gray-800;
}

/* ---------- kleines Häkchen oben rechts ---------- */
.badge {
  @apply absolute top-1.5 right-1.5 hidden
         h-5 w-5 items-center justify-center rounded-full
         bg-emerald-600 text-white text-[10px];
}
.badge-red {
  @apply bg-red-500;
}

/* ---------- Auswahl-Feedback   (grün) ---------- */
.box:has(.peer:checked) {
  @apply bg-emerald-50 border-emerald-600 ring-2 ring-emerald-300;
}
.box:has(.peer:checked) .badge {
  @apply flex;
}
.box:has(.peer:checked) .icon {
  @apply text-emerald-700 scale-110;
}
.box:has(.peer:checked) .txt {
  @apply text-emerald-700;
}

/* ---------- Sonderfall „Nein danke" (rot) ---------- */
.box.red .icon {
  @apply text-red-500;
}
.box.red .txt {
  @apply text-red-600;
}
.box.red:has(.peer:checked) {
  @apply bg-red-50 border-red-500 ring-red-300;
}
.box.red:has(.peer:checked) .icon {
  @apply text-red-600 scale-110;
}
.box.red:has(.peer:checked) .txt {
  @apply text-red-700;
}
.box.red .badge {
  @apply badge-red;
}

/* ---------- Button volle Breite ---------- */
#heizsystemForm button {
  @apply w-full;
}

/* custom.css  (oder @layer base in deiner Tailwind-CSS) */
html {
  scroll-behavior: smooth;
}

/* Höhe des Headers ≈ 4 rem (64 px) → etwas Puffer */
section[id] {
  scroll-margin-top: 0.8rem;
} /* global */

#mobile-menu {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
#mobile-menu.hidden {
  opacity: 0;
  transform: translateY(-10px);
}
#mobile-menu:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
}
/* ---------- Hero-Section ---------- */
@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ping-slow {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  75%,
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

.animate-fade-in-down {
  animation: fade-in-down 0.6s ease-out forwards;
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}

.animate-fade-in {
  animation: fade-in-down 0.8s ease-out forwards;
}

.animate-ping-slow {
  animation: ping-slow 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ---------- So Funktionierts ---------- */
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out both;
}
.delay-200 {
  animation-delay: 0.2s;
}
.delay-400 {
  animation-delay: 0.4s;
}

/* ---------- FAQ ---------- */
details[open] .faq-content {
  animation: fadeIn 0.25s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- HERO Mobil ---------- */
@media (max-width: 375px) {
  #hero .hero-content {
    margin-top: 3rem; /* vorher -3rem / -4rem / -6rem */
  }
}

/* ---------- HERO BILD-OPTIMIERUNG ---------- */
/* Hintergrund-Banner: Immer vollständig sichtbar, responsive */
.hero-banner {
  object-fit: cover; /* Standard für Desktop */
}

/* Tablet: object-contain für vollständige Sichtbarkeit */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-banner {
    object-fit: contain;
    object-position: center;
  }
}

/* Mobile: object-cover für bessere Abdeckung */
@media (max-width: 767px) {
  .hero-banner {
    object-fit: cover;
  }
}

/* Hero-Illustration: Responsive Größenanpassung */
.hero-illustration {
  max-width: 70%; /* Kleine Screens */
  height: auto;
  width: auto;
}

/* Tablet: Optimale Größe für iPad */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-illustration {
    max-width: 55%;
  }
}

/* Desktop: Kompakte Darstellung */
@media (min-width: 1025px) {
  .hero-illustration {
    max-width: 45%;
  }
}

/* Sehr kleine Screens: Maximale Breite */
@media (max-width: 480px) {
  .hero-illustration {
    max-width: 80%;
  }
}

.form-field {
  @apply border border-gray-300 rounded-lg px-4 py-3 text-base focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm transition;
}

/* Footer: Fachpartner werden (dezent, mit sichtbarem Hover) */
.footer-partner-link {
  display: inline-block;
  color: #bfdbfe; /* text-blue-200 */
  background-color: rgba(37, 99, 235, 0.1); /* bg-blue-600/10 */
  padding: 0.5rem 1rem; /* px-4 py-2 */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: none;
  outline: 1px solid rgba(96, 165, 250, 0.3); /* ring-blue-400/30 */
  transition: all 0.2s ease-out;
}
.footer-partner-link:hover {
  color: #ffffff; /* white */
  background-color: rgba(37, 99, 235, 0.25); /* stärkeres Blau */
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  outline-color: rgba(96, 165, 250, 0.5);
}
.footer-partner-link:focus-visible {
  outline: 2px solid #3b82f6; /* ring-blue-500 */
  outline-offset: 3px;
}

/* ===== STEP 8: MODERNE LADEANIMATION ======================================= */

/* Container für Step 8 */
.step[data-step="8"] {
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
  animation: step8SlideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Einblend-Animation für den gesamten Step */
@keyframes step8SlideIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Haupttext-Styling - seriös und elegant */
.step[data-step="8"] #loading-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
  animation: step8TextGlow 3s ease-in-out infinite alternate;
  letter-spacing: 0.5px;
}

@keyframes step8TextGlow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.01);
  }
}

/* Icon-Styling - subtil pulsierend */
.step[data-step="8"] #loading-text i {
  color: #10b981;
  font-size: 2rem;
  margin-right: 0.75rem;
  animation: step8IconPulse 2s ease-in-out infinite;
}

@keyframes step8IconPulse {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(2deg);
  }
}

/* Spinner-Container */
.step[data-step="8"] .flex.justify-center {
  position: relative;
  margin: 2rem 0;
}

/* Moderne Spinner-Animation - elegant und ungewöhnlich */
.step[data-step="8"] .animate-spin {
  width: 80px;
  height: 80px;
  border: none;
  background: conic-gradient(
    from 0deg,
    transparent,
    #10b981,
    #34d399,
    #6ee7b7,
    transparent
  );
  border-radius: 50%;
  position: relative;
  animation: step8SpinnerRotate 2s linear infinite;
}

@keyframes step8SpinnerRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Spinner-Inner-Circle */
.step[data-step="8"] .animate-spin::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: inherit;
  border-radius: 50%;
}

/* Spinner-Pulse-Effekt - subtil */
.step[data-step="8"] .animate-spin::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, #10b981, #34d399);
  border-radius: 50%;
  animation: step8SpinnerPulse 3s ease-in-out infinite;
}

@keyframes step8SpinnerPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
  }
}

/* Untertext-Styling */
.step[data-step="8"] p:last-of-type {
  color: #64748b;
  font-size: 0.95rem;
  font-weight: 500;
  margin-top: 1.5rem;
  position: relative;
  z-index: 2;
  animation: step8TextFade 4s ease-in-out infinite;
}

@keyframes step8TextFade {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  .step[data-step="8"] {
    padding: 2rem 1.5rem;
  }

  .step[data-step="8"] #loading-text {
    font-size: 1.25rem;
  }

  .step[data-step="8"] .animate-spin {
    width: 60px;
    height: 60px;
  }

  .step[data-step="8"] .animate-spin::before {
    width: 45px;
    height: 45px;
  }

  .step[data-step="8"] .animate-spin::after {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  .step[data-step="8"] {
    padding: 1.5rem 1rem;
  }

  .step[data-step="8"] #loading-text {
    font-size: 1.125rem;
  }

  .step[data-step="8"] .animate-spin {
    width: 50px;
    height: 50px;
  }

  .step[data-step="8"] .animate-spin::before {
    width: 38px;
    height: 38px;
  }

  .step[data-step="8"] .animate-spin::after {
    width: 25px;
    height: 25px;
  }
}

/* Smooth Transitions */
.step[data-step="8"] * {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- PV Rechner – UI Tokens --- */
:root {
  --brand-600: #16a34a; /* tailwind green-600 */
  --brand-700: #15803d; /* green-700 */
  --brand-50: #f0fdf4; /* green-50 */
  --ink: #0f172a; /* slate-900 */
  --radius-pill: 9999px;
  --shadow-sm: 0 2px 6px rgba(2, 6, 23, 0.06);
  --shadow-md: 0 8px 18px rgba(2, 6, 23, 0.1);
}

/* Actionbar Container */
.actionbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
  margin: 28px 0; /* mehr Luft zum Container */
}

/* Button Base */
.btn {
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  line-height: 1;
  border: 2px solid transparent;
  transition:
    transform 0.02s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  user-select: none;
}
.btn:active {
  transform: translateY(1px);
}

/* Primary (gefüllt) */
.btn--primary {
  background: var(--brand-600);
  color: #fff;
  border-color: var(--brand-600);
}
.btn--primary:hover {
  background: var(--brand-700);
}
.btn--primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--brand-600);
}

/* Outline */
.btn--outline {
  background: #fff;
  color: var(--brand-700);
  border-color: var(--brand-600);
  box-shadow: var(--shadow-sm);
}
.btn--outline:hover {
  background: var(--brand-50);
}
.btn--outline:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--brand-600);
}

/* Icons (Font Awesome oder SVG) */
.btn i,
.btn .icon {
  font-size: 1rem;
  display: inline-block;
  line-height: 0;
}

/* Ergebnis-Card etwas luftiger */
.result-card {
  padding: 1.75rem;
}

/* Formular-Logo in Kartenköpfen */
.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.card-title__left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.form-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
}
@media (min-width: 640px) {
  .form-logo {
    height: 36px;
  }
}

/* --- PV Rechner: Kopf-Logo --- */
.header-logo {
  display: block;
  margin: 0 auto 12px; /* zentriert + Abstand zur H1 */
  height: 56px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
}
@media (min-width: 640px) {
  .header-logo {
    height: 64px;
    margin-bottom: 14px;
  }
}

/* Actionbar mit Projektname + CTAs */
.actionbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin: 28px 0 24px;
}
.actionbar__spacer {
  flex: 1 1 auto;
}
.actionbar__input {
  min-width: 240px;
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid #d1d5db;
  box-shadow: var(--shadow-sm);
}
.actionbar__input:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px var(--brand-50);
}

/* ===== Minimal Chips / Segments ===== */
:root {
  --chip-bg: #f8fafc; /* slate-50 */
  --chip-bg-hover: #f1f5f9; /* slate-100 */
  --chip-border: #e5e7eb; /* gray-200 */
  --chip-text: #0f172a; /* slate-900 */
  --chip-icon: #64748b; /* slate-500 */
  --chip-on: #16a34a; /* brand */
  --chip-on-hover: #15803d;
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: 9999px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--chip-text);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.04);
}
.chip .chip__icon {
  font-size: 0.95rem;
  color: var(--chip-icon);
  line-height: 0;
}
.chip:hover {
  background: var(--chip-bg-hover);
}
.chip:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px rgba(22, 163, 74, 0.35);
}

.chip.is-active {
  background: var(--chip-on);
  border-color: var(--chip-on);
  color: #fff;
}
.chip.is-active .chip__icon {
  color: #fff;
}

/* Segment = exklusive Auswahl (nur Chips, keine Rahmen drumrum) */
.segment {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Versteckt, aber zugänglich */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===== Form Inputs (kompakt) ===== */
.form-input {
  width: 100%;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.04);
}
.form-input:focus {
  outline: none;
  border-color: var(--chip-on);
  box-shadow: 0 0 0 3px #f0fdf4; /* brand-50 */
}
.form-input--narrow {
  max-width: 320px;
} /* für kleine Zahlenfelder */
.form-input--xs {
  max-width: 220px;
} /* sehr kompakt, z. B. Anzahl Module */
.form-input--readonly {
  background: #f8fafc; /* slate-50 */
  color: #475569; /* slate-600 */
  cursor: not-allowed;
}

/* Number spinners ausblenden (optisch ruhiger) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Kleine Badge */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  background: #eef2ff;
  color: #3730a3; /* indigo */
}

/* Abstände für Sektionen / Untertitel */
.subhead {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0.5rem 0 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.spaced-block {
  margin-top: 1rem;
}

/* --- kompakte Inputs & Konsistenz --- */
.form-input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.04);
}
.form-input:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px #f0fdf4;
}
.form-input--narrow {
  max-width: 320px;
}
.form-input--xs {
  max-width: 220px;
}
.form-input--readonly {
  background: #f8fafc;
  color: #475569;
  cursor: not-allowed;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Unterüberschriften & Abstände */
.group-head {
  font-weight: 700;
  margin: 0.75rem 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.help-note {
  font-size: 0.78rem;
  color: #64748b;
}
.divider {
  height: 1px;
  background: #e5e7eb;
  margin: 1rem 0;
}

/* Chips (minimal, konsistent) – bereits vorhanden, hier nur dezente Empfehlung-Markierung */
.chip--recommend {
  outline: 2px dashed rgba(22, 163, 74, 0.55);
  outline-offset: 2px;
}
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  background: #eef2ff;
  color: #3730a3;
}
.link {
  color: #166534;
  text-decoration: underline;
  cursor: pointer;
}

/* Ergebnis-Karte – dezente Premium-Optik */
.result-card {
  background:
    linear-gradient(#fff, #fff) padding-box,
    radial-gradient(120% 100% at 10% 0%, #86efac40, transparent 60%) border-box;
  border: 1px solid transparent;
}
.result-card__halo {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 120px;
  pointer-events: none;
  background: radial-gradient(40% 60% at 10% 50%, #22c55e22, transparent 70%);
  filter: blur(12px);
}

/* KPI Block (großer Preisbereich) */
.kpi-block {
  border-radius: 14px;
  padding: 14px 16px;
  background: #ecfdf5; /* emerald-50 */
  box-shadow: inset 0 1px 0 #d1fae5;
  border: 1px solid #d1fae5; /* emerald-100 */
}
.kpi-value {
  font-size: 1.7rem;
  line-height: 1.2;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Facts + Pairs */
.fact-tile {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
}
.fact-label {
  font-size: 0.75rem;
  color: #6b7280;
}
.fact-value {
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pair {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.95rem;
  gap: 12px;
}
.pair > span:last-child {
  font-variant-numeric: tabular-nums;
}

/* Subtiles Wert-Update-Feedback */
.kpi-flash {
  animation: kpi-pop 0.48s ease;
}
@keyframes kpi-pop {
  0% {
    transform: scale(1);
    background-color: transparent;
  }
  35% {
    transform: scale(1.02);
    background-color: #f0fdf4;
  }
  100% {
    transform: scale(1);
    background-color: transparent;
  }
}

/* Mini-Ergebnistabelle */
.mini-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  table-layout: fixed;
}
.mini-table td {
  padding: 6px 8px;
  vertical-align: middle;
}
.mini-table td:first-child {
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-table td:last-child {
  text-align: right;
  font-weight: 600;
}
.badge-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #065f46;
  font-size: 11px;
  border: 1px solid #d1fae5;
}

/* Gruppentrenner in der Ergebnistabelle */
.mini-table .mini-sep .mini-sep__td {
  padding: 8px 10px;
  background: linear-gradient(180deg, #f8fafc, #f3f4f6);
  color: #374151;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 8px;
}

/* Abstand oberhalb des ersten Blocks etwas kleiner */
.mini-table .mini-sep:first-child .mini-sep__td {
  margin-top: 2px;
}

/* ===== CTA BUTTON STYLES ======================================= */
/* CTA Button Base */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  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;
  min-height: 48px; /* Feste Mindesthöhe für alle Buttons */
  box-sizing: border-box;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.cta-button:active {
  transform: translateY(0);
}

.cta-button i {
  margin-right: 8px;
  font-size: 16px;
}

.cta-button span {
  font-weight: 700;
  margin: 0 8px;
}

.cta-button i:last-child {
  margin-right: 0;
  margin-left: 8px;
}

/* Primary Button (Emerald) */
.cta-button--primary {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: white;
}

.cta-button--primary:hover {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
}

.cta-button--primary i {
  color: #d1fae5;
}

/* Secondary Button (Blue) */
.cta-button--secondary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: white;
}

.cta-button--secondary:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
}

.cta-button--secondary i {
  color: #dbeafe;
}

/* Outline Button (Green) */
.cta-button--outline {
  background: white;
  color: #059669;
  border: 2px solid #059669;
  box-shadow: 0 2px 4px -1px rgba(5, 150, 105, 0.1);
  min-height: 44px; /* Etwas kleiner wegen Border */
}

.cta-button--outline:hover {
  background: #f0fdf4;
  border-color: #047857;
  color: #047857;
  box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.15);
}

.cta-button--outline i {
  color: #059669;
}

.cta-button--outline:hover i {
  color: #047857;
}

/* Responsive Design */
@media (min-width: 640px) {
  .cta-button {
    width: auto;
    min-width: 200px;
  }
}
/* ===== HERO CTA BUTTON ======================================= */
#hero-cta-button {
  font-size: 18px !important;
  padding: 16px 32px !important;
  min-height: 56px !important;
}

@media (min-width: 640px) {
  #hero-cta-button {
    font-size: 20px !important;
    padding: 18px 36px !important;
    min-height: 60px !important;
  }
}

@media (min-width: 768px) {
  #hero-cta-button {
    font-size: 22px !important;
    padding: 20px 40px !important;
    min-height: 64px !important;
  }
}

@media (min-width: 1024px) {
  #hero-cta-button {
    font-size: 28px !important;
    padding: 24px 48px !important;
    min-height: 80px !important;
  }
}
/* ===== PARTNER CTA BUTTON ======================================= */
#partner-cta-button {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: white !important;
  font-weight: 700 !important;
  padding: 18px 36px !important;
  min-height: 56px !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3) !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  border: none !important;
}

#partner-cta-button:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 35px rgba(37, 99, 235, 0.4) !important;
}

#partner-cta-button:active {
  transform: translateY(-1px) !important;
}

@media (min-width: 640px) {
  #partner-cta-button {
    font-size: 18px !important;
    padding: 20px 40px !important;
    min-height: 60px !important;
  }
}

@media (min-width: 768px) {
  #partner-cta-button {
    font-size: 20px !important;
    padding: 22px 44px !important;
    min-height: 64px !important;
  }
}

/* ===== HERO FLUIDE GRÖSSEN ======================================= */
.hero-fluid {
  /* Dynamische Höhe zwischen 600px und 900px, 85% Viewport */
  min-height: clamp(600px, 85dvh, 900px);
}

/* Hero-Banner gegen iOS-Objekt-Fit/Rendering-Bugs härten */
.hero-banner {
  display: block; /* verhindert Inline-Image-Gap */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  min-width: 100%; /* iOS-Safari Guard */
  min-height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0); /* verhindert Pixel-Gaps beim Scale */
  will-change: transform;
}

/* Illustration skaliert mit Viewport: begrenze Breite + Höhe gleichzeitig */
.hero-fluid .hero-illustration,
.hero-fluid img[src*="calculator.svg"],
.hero-fluid img[src*="hero-icon.svg"],
.hero-fluid img[src*="flaggen/"] {
  width: clamp(58vw, 75vw, 1000px);
  max-height: clamp(280px, 55dvh, 560px);
  height: auto;
  object-fit: contain;
  display: block;
}

/* Headline fluid - funktioniert für alle H1 im Hero */
.hero-fluid .hero-title,
.hero-fluid h1 {
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3rem); /* ~28px → 48px */
  line-height: 1.2;
}

/* Benefit-Liste: Schrift + Abstände fluid */
.hero-fluid .hero-benefits {
  font-size: clamp(1rem, 0.8rem + 1vw, 1.375rem); /* ~16px → 22px */
  column-gap: clamp(1rem, 1vw + 0.5rem, 2.5rem);
  row-gap: clamp(0.75rem, 0.5rem + 0.8vw, 2rem);
}
.hero-fluid .hero-benefits img {
  width: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  height: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
}

/* CTA fluid: Font + Padding - funktioniert für alle Buttons im Hero */
.hero-fluid .cta-button,
.hero-fluid a[href*="#pv-rechner"],
.hero-fluid a[href*="#formular"] {
  font-size: clamp(1rem, 0.9rem + 0.9vw, 1.5rem); /* ~16px → 24px */
  padding-block: clamp(0.65rem, 0.5rem + 0.8vw, 1.25rem);
  padding-inline: clamp(1.25rem, 1rem + 3vw, 3.5rem);
  border-radius: 0.75rem;
}

/* Badge & Trust-Zeile fluid */
.hero-fluid .hero-badge {
  font-size: clamp(0.85rem, 0.75rem + 0.35vw, 0.95rem);
  padding: 0.35rem 0.75rem;
}
.hero-fluid .trust-note {
  font-size: clamp(0.9rem, 0.85rem + 0.4vw, 1.05rem);
}

/* Untertitel fluid - für pv-rechner.html */
.hero-fluid p {
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem); /* ~16px → 20px */
  line-height: 1.4;
}

/* Vertikales Spacing im Hero fluide steuern */
.hero-fluid .hero-content {
  row-gap: clamp(1.25rem, 0.8rem + 1.2vw, 2.5rem);
  padding-top: 1.5rem;
  padding-bottom: 1rem;
}

/* Abstände zwischen Hero-Elementen universell steuern - überschreibt Tailwind space-y-8 */
.hero-fluid .hero-content.space-y-8 > * + * {
  margin-top: clamp(1.25rem, 0.8rem + 1.2vw, 2.5rem) !important;
}

/* Fallback für alle Hero-Elemente */
.hero-fluid .hero-content > * + * {
  margin-top: clamp(1rem, 0.5rem + 1.5vw, 2.5rem);
}

/* iPad-Portrait Guardrail: alles sicher im Hero halten */
@media (orientation: portrait) and (min-width: 700px) and (max-width: 1024px) {
  .hero-fluid {
    padding-bottom: 5.5rem;
  }
  .hero-fluid .hero-illustration {
    max-height: clamp(280px, 42dvh, 500px);
    width: clamp(58vw, 64vw, 820px);
  }
}

/* Fallback für Browser ohne dvh */
@supports not (height: 100dvh) {
  .hero-fluid {
    min-height: 100vh;
  }
}

/* Sicherheitsnetz: Falls px-4 am Section NICHT entfernt werden kann */
#hero.padded .hero-banner {
  left: -1rem;
  right: -1rem; /* entspricht px-4 links/rechts */
}

/* ===== HERO CTA BUTTONS STYLING ======================================= */
.hero-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  opacity: 1;
}

@media (min-width: 640px) {
  .hero-cta-buttons {
    flex-direction: row;
    gap: 2rem;
  }
}

/* Primärer Button - "Jetzt berechnen" */
.hero-cta-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: #16a34a;
  color: white;
  font-weight: 700;
  padding: 1.25rem 2.5rem;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.hero-cta-primary:hover {
  background: #15803d;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.hero-cta-primary:active {
  transform: translateY(0) scale(0.98);
}

/* Glanz-Effekt für primären Button - vereinfacht */
.hero-cta-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero-cta-primary:hover::before {
  opacity: 1;
}

/* Sekundärer Button - "Angebote vergleichen" */
.hero-cta-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: white;
  color: #16a34a;
  font-weight: 700;
  padding: 1.25rem 2.5rem;
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid #16a34a;
  cursor: pointer;
}

.hero-cta-secondary:hover {
  background: #f0fdf4;
  color: #15803d;
  border-color: #15803d;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.hero-cta-secondary:active {
  transform: translateY(0);
}

/* Icon-Styling für beide Buttons */
.hero-cta-primary i,
.hero-cta-secondary i {
  font-size: 1.25rem;
  transition: all 0.3s ease;
}

.hero-cta-primary:hover i:first-child,
.hero-cta-secondary:hover i:first-child {
  transform: scale(1.1);
}

.hero-cta-primary:hover i:last-child,
.hero-cta-secondary:hover i:last-child {
  transform: translateX(4px);
}

/* Text-Styling */
.hero-cta-primary span,
.hero-cta-secondary span {
  font-size: 1.125rem;
  position: relative;
  z-index: 1;
}

/* Responsive Anpassungen */
@media (max-width: 480px) {
  .hero-cta-primary,
  .hero-cta-secondary {
    padding: 1rem 2rem;
    font-size: 1rem;
  }

  .hero-cta-primary i,
  .hero-cta-secondary i {
    font-size: 1.125rem;
  }
}

/* Vergleich-Icon Stile */
.vergleich-icon {
  position: fixed;
  bottom: 130px;
  right: 30px;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000;
  border: 3px solid #ffffff;
}

.vergleich-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 35px rgba(59, 130, 246, 0.6);
}

.vergleich-icon svg {
  width: 45px;
  height: 45px;
  filter: brightness(0) invert(1);
}

.vergleich-icon::before {
  content: "Vergleich";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.vergleich-icon::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1f2937;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.vergleich-icon:hover::before,
.vergleich-icon:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Förderungs-Icon Stile */
.foerderung-icon {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(251, 191, 36, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000;
  border: 3px solid #ffffff;
}

.foerderung-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 35px rgba(251, 191, 36, 0.6);
}

.foerderung-icon svg {
  width: 45px;
  height: 45px;
  filter: brightness(0) invert(1);
}

.foerderung-icon::before {
  content: "Förderung";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.foerderung-icon::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1f2937;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.foerderung-icon:hover::before,
.foerderung-icon:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  .vergleich-icon {
    bottom: 110px;
    right: 20px;
    width: 70px;
    height: 70px;
  }
  
  .vergleich-icon svg {
    width: 40px;
    height: 40px;
  }
  
  .foerderung-icon {
    bottom: 20px;
    right: 20px;
    width: 70px;
    height: 70px;
  }
  
  .foerderung-icon svg {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .vergleich-icon {
    bottom: 95px;
    right: 15px;
    width: 60px;
    height: 60px;
  }
  
  .vergleich-icon svg {
    width: 35px;
    height: 35px;
  }
  
  .foerderung-icon {
    bottom: 15px;
    right: 15px;
    width: 60px;
    height: 60px;
  }
  
  .foerderung-icon svg {
    width: 35px;
    height: 35px;
  }
}