/* Ausgelagerte Styles aus header/footer-Komponenten (W3C: <style> nicht im Body erlaubt) */

/* --color-surface löst zur Laufzeit nicht zuverlässig auf (das Theme-JS
   überschreibt die Variable inline auf <html> mit einer Kette, die zu nichts
   auflöst). Dadurch bleiben body, Wrapper UND Sektionen (alle mit
   background: var(--color-surface)) transparent → weiße Fläche.
   Fix: --color-surface konkret und theme-abhängig erzwingen (per !important,
   um den Inline-Wert zu schlagen). */
:root {
  --color-surface: #f7fbfd !important;
}
html[data-theme="dark"] {
  --color-surface: #071421 !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --color-surface: #071421 !important;
  }
}
html {
  background-color: var(--color-surface);
}
body {
  min-height: 100vh;
}

@keyframes navigation-glow-scan {0%,100% {transform: translateX(-100%);
                  opacity: 0.3;}
                  50% {transform: translateX(100%);
                  opacity: 0.6;}}@keyframes navigation-logo-pulse {0%,100% {opacity: 0.4;
                  transform: scale(1);}
                  50% {opacity: 0.8;
                  transform: scale(1.1);}}

[data-theme="dark"] .navigation__theme-icon--sun {
                    opacity: 0;
                    transform: rotate(-90deg) scale(0.5);
                  }
                  [data-theme="dark"] .navigation__theme-icon--moon {
                    opacity: 1;
                    transform: rotate(0deg) scale(1);
                  }
                  @media (prefers-reduced-motion: reduce) {
                  .navigation, .navigation *, .navigation::before {
                    animation-duration: 0.01ms !important;
                    animation-iteration-count: 1 !important;
                    transition-duration: 0.01ms !important;
                  }
                  }

@keyframes footer-glow-pulse {0%,100% {opacity: 0.6;
                  transform: translateX(-50%) scale(1);}
                  50% {opacity: 0.8;
                  transform: translateX(-50%) scale(1.1);}}@keyframes footer-grid-scan {0% {background-position: 0 0;}
                  100% {background-position: 40px 40px;}}@keyframes footer-icon-glow {0%,100% {filter: drop-shadow(
                          0 0 8px color-mix(in srgb, var(--color-accent) 50%, transparent)
                        );}
                  50% {filter: drop-shadow(
                          0 0 16px color-mix(in srgb, var(--color-accent) 80%, transparent)
                        );}}@keyframes footer-newsletter-shine {0% {left: -100%;}
                  50%,100% {left: 200%;}}

@media (prefers-reduced-motion: reduce) {
                  .footer-glow-effect, .footer-grid-bg, .footer-brand-icon, .footer-newsletter::before {
                    animation: none;
                  }
                  * {
                    transition-duration: 0.01ms !important;
                  }
                  }

/* Sichtbare Breadcrumb-Navigation (passend zum BreadcrumbList-JSON-LD) */
.breadcrumb {
  /* Abstand, um die fixierte Navigationsleiste (~68px) zu überspringen */
  margin: 5rem auto 0;
  /* gleiche zentrierte Inhaltsbreite wie die übrigen Container */
  max-width: var(--content-max-width, 84rem);
  padding: 0.75rem var(--spacing-lg, 1rem);
  font-size: 0.875rem;
  position: relative;
  z-index: 1;
}
.breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-on-surface-secondary, #6b7280);
}
.breadcrumb__item:not(:first-child)::before {
  content: "/";
  opacity: 0.5;
}
.breadcrumb__item a {
  color: var(--color-primary, #4fe0ff);
  text-decoration: none;
}
.breadcrumb__item a:hover,
.breadcrumb__item a:focus-visible {
  text-decoration: underline;
}
.breadcrumb__item[aria-current="page"] span {
  color: var(--color-on-surface, inherit);
  font-weight: 500;
}

/* Mikrotext direkt unter primären CTAs (Risiko-Umkehr) */
.cta-note {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-on-surface-secondary, #6b7280);
}
