/* =============================================================================
   EVIL OFFICE – Cookie-Consent-Banner (css/consent.css)
   Gehört zu js/consent.js. Nutzt ausschließlich css/tokens.css-Variablen,
   damit die Datei auch auf Seiten funktioniert, die style.css/shop.css nicht
   laden (z. B. 404.html).

   z-index KRITISCH: Der Banner darf den Custom-Checkout (#eo-checkout-overlay,
   css/shop.css z-index 8998–9300) und den Mini-Cart (.eo-mini-cart, z-index
   9500) NIEMALS überdecken. Der Banner läuft daher weit darunter (5000/4999);
   js/consent.js blendet ihn zusätzlich hart aus, solange der Checkout offen
   ist (MutationObserver auf #eo-checkout-overlay).
   ============================================================================= */

.eo-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5000; /* < 8998 (#eo-checkout-overlay) und < 9500 (.eo-mini-cart) */
  background: var(--bg-white, #fff);
  border-top: 3px solid var(--red, #C61F26);
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,.18));
  padding: 18px max(16px, calc((100% - var(--max-w, 1440px)) / 2 + 20px));
}

.eo-consent-banner:focus {
  outline: none; /* programmatischer Fokus auf den Container selbst (tabindex=-1),
                    kein sichtbarer Tastatur-Fokusring nötig – die Buttons
                    darin haben ihren eigenen :focus-visible-Ring. */
}

.eo-consent-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.eo-consent-text {
  flex: 1 1 420px;
  min-width: 240px;
}

.eo-consent-title {
  margin: 0 0 4px;
  font-family: var(--font-display, sans-serif);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text-dark, #202020);
}

.eo-consent-copy {
  margin: 0;
  font-family: var(--font-body, sans-serif);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-mid, #5e5e5e);
}

.eo-consent-copy a {
  color: var(--red, #C61F26);
  text-decoration: underline;
}

.eo-consent-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Beide Buttons bewusst gleich groß/gewichtig (gleiche Höhe, gleiches Padding,
   gleiche Schriftgröße, kräftiger Kontrast) – "Ablehnen" darf laut TDDDG/DSGVO
   nicht schwerer zu finden/wählen sein als "Akzeptieren". */
.eo-consent-btn {
  appearance: none;
  border-radius: var(--radius-sm, 6px);
  font-family: var(--font-display, sans-serif);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  padding: 12px 20px;
  min-width: 168px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--transition, 200ms), box-shadow var(--transition, 200ms);
}

.eo-consent-btn:hover {
  transform: translateY(-1px);
}

.eo-consent-btn:focus-visible {
  outline: 2px solid var(--red, #C61F26);
  outline-offset: 2px;
}

.eo-consent-btn--accept {
  background: var(--red, #C61F26);
  border-color: var(--red, #C61F26);
  color: #fff;
}

.eo-consent-btn--accept:hover {
  background: var(--red-dark, #A9191F);
  border-color: var(--red-dark, #A9191F);
}

.eo-consent-btn--reject {
  background: #fff;
  border-color: var(--text-dark, #202020);
  color: var(--text-dark, #202020);
}

.eo-consent-btn--reject:hover {
  background: var(--bg-cream, #F3EEE6);
}

@media (max-width: 640px) {
  .eo-consent-banner { padding: 16px; }
  .eo-consent-actions { width: 100%; }
  .eo-consent-btn { flex: 1 1 0; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .eo-consent-btn { transition: none; }
  .eo-consent-btn:hover { transform: none; }
}

/* -----------------------------------------------------------------------
   Footer-Trigger "Cookie-Einstellungen" (von js/consent.js selbst injiziert)
   ----------------------------------------------------------------------- */

/* Fall A: Seite hat einen site-footer mit .footer-legal – Button reiht sich
   optisch wie die Nachbar-Links (Impressum/Datenschutz/AGB/Widerruf) ein. */
.eo-cookie-settings-link {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: color var(--transition, 200ms);
}

.eo-cookie-settings-link:hover,
.eo-cookie-settings-link:focus-visible {
  color: rgba(255, 255, 255, 0.65);
}

/* Fall B: Seite ohne site-footer (404.html) – dezenter fixierter Trigger,
   liegt unter dem Banner (z-index < 5000) und ist irrelevant, solange der
   Banner offen ist. */
.eo-cookie-settings-fab {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 4999;
  appearance: none;
  background: var(--bg-white, #fff);
  border: 1px solid var(--border, #ddd6cb);
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,.1));
  padding: 8px 12px;
  font-family: var(--font-body, sans-serif);
  font-size: 0.72rem;
  color: var(--text-mid, #5e5e5e);
  cursor: pointer;
}

.eo-cookie-settings-fab:hover,
.eo-cookie-settings-fab:focus-visible {
  color: var(--red, #C61F26);
  border-color: var(--red-border, rgba(198,31,38,.18));
}