/* ==========================================================
   ERROR404 // COOKIE NOTICE
   Technisch notwendige Cookies und Local Storage
   ========================================================== */

.error404-cookie-notice {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 99999;

  width: min(430px, calc(100vw - 32px));
  padding: 1px;

  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      var(--cyan, #00eaff),
      var(--pink, #ff2bd6)
    );

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.48),
    0 0 28px rgba(0, 234, 255, 0.12);

  opacity: 0;
  visibility: hidden;
  transform: translateY(28px) scale(0.97);

  transition:
    opacity 0.28s ease,
    visibility 0.28s ease,
    transform 0.28s ease;
}

.error404-cookie-notice.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.error404-cookie-notice-inner {
  position: relative;
  overflow: hidden;

  padding: 22px;

  border-radius: 19px;

  background:
    linear-gradient(
      145deg,
      rgba(15, 18, 28, 0.97),
      rgba(7, 9, 17, 0.98)
    );

  color: #f5f7ff;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.error404-cookie-notice-inner::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at top left,
      rgba(0, 234, 255, 0.12),
      transparent 46%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(255, 43, 214, 0.1),
      transparent 42%
    );
}

.error404-cookie-notice-content {
  position: relative;
  z-index: 1;
}

.error404-cookie-notice-title {
  display: flex;
  align-items: center;
  gap: 10px;

  margin: 0 0 10px;

  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.error404-cookie-notice-icon {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      rgba(0, 234, 255, 0.16),
      rgba(255, 43, 214, 0.16)
    );

  font-size: 17px;
}

.error404-cookie-notice-text {
  margin: 0;

  color: rgba(245, 247, 255, 0.78);

  font-size: 14px;
  line-height: 1.65;
}

.error404-cookie-notice-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  margin-top: 18px;
}

.error404-cookie-notice-link {
  color: var(--cyan, #00eaff);

  font-size: 13px;
  font-weight: 700;
  text-decoration: none;

  transition:
    color 0.2s ease,
    text-shadow 0.2s ease;
}

.error404-cookie-notice-link:hover,
.error404-cookie-notice-link:focus-visible {
  color: var(--pink, #ff2bd6);
  text-shadow: 0 0 14px rgba(255, 43, 214, 0.34);
}

.error404-cookie-notice-button {
  min-height: 40px;
  padding: 0 18px;

  border: 0;
  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      var(--cyan, #00eaff),
      var(--pink, #ff2bd6)
    );

  color: #05070d;

  font: inherit;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.03em;

  cursor: pointer;

  box-shadow:
    0 8px 24px rgba(0, 234, 255, 0.18);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.error404-cookie-notice-button:hover,
.error404-cookie-notice-button:focus-visible {
  transform: translateY(-2px);

  box-shadow:
    0 12px 30px rgba(255, 43, 214, 0.25);

  filter: brightness(1.08);
}

.error404-cookie-notice-button:active {
  transform: translateY(0);
}

@media (max-width: 620px) {
  .error404-cookie-notice {
    right: 16px;
    bottom: 16px;
    left: 16px;

    width: auto;
  }

  .error404-cookie-notice-inner {
    padding: 19px;
  }

  .error404-cookie-notice-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .error404-cookie-notice-link {
    text-align: center;
  }

  .error404-cookie-notice-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .error404-cookie-notice,
  .error404-cookie-notice-button,
  .error404-cookie-notice-link {
    transition: none;
  }
}