/* /css/cookie_fix.css
   Fix: Cookie-Banner korrekt positionieren (index + vynero) + überall gleich wie project1.
   Grund: in styles.css gibt es mehrere .cookie-consent Blöcke -> left/right überschreibt left:50%,
   aber transform bleibt -> Banner rutscht „komisch“. Diese Datei erzwingt eine saubere, stabile UI.
*/

#cookie-consent.cookie-consent{
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;

  width: min(980px, calc(100% - 32px)) !important;
  max-width: none !important;

  background: rgba(0,0,0,0.85) !important;
  color: #ffffff !important;

  padding: 0 !important;
  border-radius: 16px !important;

  z-index: 2147483647 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55) !important;
}

#cookie-consent[hidden],
#cookie-consent.is-hidden{
  display: none !important;
}

/* Inner layout */
#cookie-consent .cookie-inner{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 18px !important;
}

#cookie-consent .cookie-text{
  flex: 1 1 auto !important;
  min-width: 240px !important;
}

#cookie-consent .cookie-text p{
  margin: 0 0 10px 0 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: rgba(255,255,255,0.92) !important;
}

#cookie-consent .cookie-more{
  display: inline-block !important;
  font-weight: 900 !important;
  color: var(--primary-color, #1e90ff) !important;
  text-decoration: underline !important;
}

/* Buttons */
#cookie-consent .cookie-buttons{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

#cookie-consent .cookie-buttons .btn{
  margin-top: 0 !important;
  font-size: 1rem !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Scoped variants (nur im Cookie-Banner) */
#cookie-consent .btn-primary{
  background: var(--primary-color, #1e90ff) !important;
  color: #fff !important;
  border: none !important;
}

#cookie-consent .btn-primary:hover{
  background: var(--accent-color, #ff6347) !important;
  transform: translateY(-2px) !important;
}

#cookie-consent .btn-ghost{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: rgba(255,255,255,0.95) !important;
}

#cookie-consent .btn-ghost:hover{
  background: rgba(255,255,255,0.08) !important;
  transform: translateY(-2px) !important;
}

/* Mobile stacking */
@media (max-width: 720px){
  #cookie-consent .cookie-inner{
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #cookie-consent .cookie-buttons{
    justify-content: stretch !important;
  }
  #cookie-consent .cookie-buttons .btn{
    width: 100% !important;
  }
}

/* Overlay safety: darf NICHT klicken blocken, wenn zu */
#menu-overlay[aria-hidden="true"]{
  pointer-events: none !important;
}
#menu-overlay[aria-hidden="false"]{
  pointer-events: auto !important;
}