/* Overlay – nutzt das Layering und Blur-System */
.cookie-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--surface-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: var(--z-modal-backdrop);
}

/* Modal – nutzt Design-Tokens für Oberflächen, Schatten und Radien */
.cookie-modal {
  display: none;
  position: fixed;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  width: min(480px, calc(100% - var(--sp-8)));
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6);
  z-index: var(--z-modal);
  box-shadow: var(--shadow-xl);
  text-align: center;
  font-family: var(--font);
}

.cookie-modal-icon {
  font-size: var(--icon-xl);
  margin-bottom: var(--sp-3);
  display: block;
}

.cookie-modal-title {
  font-size: var(--fz-2xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: var(--sp-4);
  line-height: var(--lh-tight);
}

.cookie-modal-text {
  font-size: var(--fz-body-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-4);
}

.cookie-link {
  color: var(--primary);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: var(--trans);
}

.cookie-link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.cookie-modal-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-6);
}

/* Button – nutzt das Brand-System und Transitions */
.cookie-btn {
  padding: var(--sp-3) var(--sp-8);
  border-radius: var(--r);
  font-size: var(--fz-tab);
  font-weight: var(--fw-bold);
  cursor: pointer;
  border: none;
  transition: var(--trans-spring);
  font-family: inherit;
}

.cookie-btn:hover {
  transform: scale(1.02);
  opacity: 0.9;
}

.cookie-btn:active {
  transform: scale(0.98);
}

.cookie-btn-accept {
  background: var(--primary);
  color: var(--text-inverse);
  box-shadow: var(--shadow-sm);
}

/* Responsive Anpassungen über Spacing-Variablen */
@media (max-width: 500px) {
  .cookie-modal {
    padding: var(--sp-6) var(--sp-4);
    border-radius: var(--r-lg);
  }
  .cookie-modal-title {
    font-size: var(--fz-xl);
  }
}