/* ============================================================
   Cookie Banner — Montera Systems
   Nutzt Design-Tokens aus base.css (CSS Custom Properties)
   ============================================================ */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-toast, 500);

  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 24px rgba(53, 48, 42, 0.10);

  /* Slide-up Animation: startet unterhalb des Viewports */
  transform: translateY(100%);
  transition: transform var(--duration-slow, 400ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Sichtbarer Zustand (per JS gesetzt) */
.cookie-banner.is-visible {
  transform: translateY(0);
}

/* Innerer Container — begrenzt Breite und zentriert */
.cookie-banner__inner {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: var(--space-4, 1rem) var(--container-px, clamp(1rem, 4vw, 2rem));

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6, 1.5rem);
}

/* Text */
.cookie-banner__text {
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-muted, #574E46);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

/* Button-Gruppe */
.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-shrink: 0;
}

/* ---- Buttons ---- */
.cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;

  padding: 10px 22px;
  min-height: 40px;
  border-radius: var(--radius-full, 9999px);
  border: 1.5px solid transparent;
  cursor: pointer;

  transition:
    opacity var(--duration-base, 250ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    background var(--duration-base, 250ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    color var(--duration-base, 250ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    border-color var(--duration-base, 250ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Primär — „Akzeptieren" */
.cookie-btn--primary {
  background: var(--color-accent, #35302A);
  color: var(--color-surface, #E6E3E0);
  border-color: var(--color-accent, #35302A);
}

.cookie-btn--primary:hover {
  opacity: 0.85;
}

.cookie-btn--primary:active {
  opacity: 0.95;
}

/* Sekundär — „Ablehnen" */
.cookie-btn--secondary {
  background: transparent;
  color: var(--color-text-muted, #574E46);
  border-color: var(--color-border, rgba(53, 48, 42, 0.15));
}

.cookie-btn--secondary:hover {
  background: rgba(53, 48, 42, 0.04);
  border-color: var(--color-border-hover, rgba(53, 48, 42, 0.35));
}

.cookie-btn--secondary:active {
  opacity: 0.9;
}

/* ---- Responsiveness ---- */
@media (max-width: 640px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4, 1rem);
  }

  .cookie-banner__actions {
    width: 100%;
    /* Ablehnen links, Akzeptieren rechts */
    justify-content: flex-end;
  }
}