/* Favicon Header/Footer Effekt – ausgelagert */
.site-header,
.site-footer {
  isolation: isolate;
}

.site-header::after,
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(125, 211, 252, .16), transparent 24rem),
    radial-gradient(circle at 84% 36%, rgba(59, 130, 246, .11), transparent 22rem),
    linear-gradient(180deg, rgba(2, 6, 23, .10), rgba(2, 6, 23, .32));
}

.favicon-particle-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

.header-demo-label,
.site-footer .footer-legal-actions {
  position: absolute;
  z-index: 5;
}

.favicon-particle {
  position: absolute;
  top: -42px;
  left: var(--fx-left, 50%);
  width: var(--fx-size, 18px);
  height: var(--fx-size, 18px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: rgba(224, 242, 254, var(--fx-opacity, .18));
  background: rgba(14, 165, 233, var(--fx-bg-opacity, .07));
  border: 1px solid rgba(186, 230, 253, var(--fx-border-opacity, .13));
  box-shadow: 0 0 22px rgba(56, 189, 248, var(--fx-glow, .16));
  filter: blur(var(--fx-blur, 0px)) drop-shadow(0 0 13px rgba(125, 211, 252, .24));
  transform: translate3d(0, -44px, 0) rotate(var(--fx-rotate-start, 0deg));
  opacity: .01;
  animation: faviconParticleFall var(--fx-duration, 16s) linear forwards;
  will-change: transform, opacity;
}

.favicon-particle .material-icons {
  font-size: calc(var(--fx-size, 18px) * .68);
  line-height: 1;
  color: inherit;
}

.site-footer .footer-legal-actions {
  right: 24px;
  bottom: 22px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.footer-modal-btn {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  background: transparent;
  border-color: rgba(186, 230, 253, .34);
  color: #e0f2fe;
  font-size: 12px;
  gap: 6px;
  box-shadow: none;
  backdrop-filter: blur(6px);
  transition: border-color .18s, box-shadow .18s, background-color .18s, color .18s, filter .18s;
}

.footer-modal-btn:hover,
.footer-modal-btn:focus-visible {
  transform: none;
  filter: none;
  color: #f0f9ff;
  background: rgba(14, 165, 233, .08);
  border-color: rgba(125, 211, 252, .78);
  box-shadow: 0 0 0 1px rgba(125, 211, 252, .18), 0 0 22px rgba(56, 189, 248, .34);
}

.footer-modal-btn .material-icons {
  font-size: 15px;
}

.modal.show {
  display: flex;
}

.modal-card {
  width: min(860px, 100%);
  max-height: min(82vh, 820px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-card h2 {
  flex: 0 0 auto;
}

.modal-content {
  overflow: auto;
  padding-right: 8px;
  color: var(--muted);
  line-height: 1.58;
}

.modal-content h3 {
  margin: 18px 0 7px;
  color: var(--text);
  font-size: 16px;
}

.modal-content p {
  margin: 0 0 12px;
}

.modal-content ul {
  margin: 0 0 14px 20px;
  padding: 0;
}

.modal-content li {
  margin: 0 0 6px;
}

.modal-content a {
  color: #7dd3fc;
  text-decoration: none;
  border-bottom: 1px solid rgba(125, 211, 252, .35);
}

.modal-content a:hover {
  color: #e0f2fe;
  border-bottom-color: rgba(224, 242, 254, .8);
}

.modal-card .actions {
  flex: 0 0 auto;
  margin-top: 16px;
}

@keyframes faviconParticleFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -46px, 0) rotate(var(--fx-rotate-start, 0deg)) scale(.92);
  }
  12% {
    opacity: var(--fx-opacity, .18);
  }
  82% {
    opacity: var(--fx-opacity, .18);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--fx-drift, 24px), calc(var(--fx-distance, 300px) + 76px), 0) rotate(var(--fx-rotate-end, 180deg)) scale(1.03);
  }
}

@media (max-width: 960px) {
  .site-footer .footer-legal-actions {
    position: absolute;
    right: 18px;
    bottom: 18px;
    margin-top: 0;
  }

  .footer-modal-btn {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .favicon-particle {
    display: none;
  }
}