/* cookie-consent.css
   Styles für das Cookie-Consent-Banner (separat ausgelagert)
*/

#cookie-banner {
  display: none; /* wird per JS sichtbar */
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: beige;
  color: #3b484c;
  border: 1px solid #e6e6e6;
  padding: 16px;
  z-index: 9999;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(59, 72, 76, 0.12);
  max-width: 980px;
  margin: 0 auto;
  font-size: 0.95rem;
  font-family: inherit;
}

#cookie-banner .col { display:inline-block; vertical-align:top; }
#cookie-banner .col.left { width: 68%; padding-right: 12px; }
#cookie-banner .col.right { width: 30%; text-align:right; }

#cookie-banner .col.left strong {
  font-size: 1.05rem;
  display:block;
  margin-bottom:6px;
  color: #3b484c;
}

#cookie-banner .col.left p {
  margin: 0 0 8px 0;
  color: #3b484c;
  line-height:1.35;
}

#cookie-banner label {
  display:block;
  margin-top:6px;
  color: #3b484c;
  font-size:0.95rem;
}

#cookie-banner input[type="checkbox"] {
  margin-right:8px;
  transform:translateY(2px);
}

/* Buttons */
#cookie-banner .btn {
    display: inline-block;
    margin: 6px 0;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
}

#cookie-accept {
    background: linear-gradient(145deg, #ff1a1a 0%, #cc0000 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.2);
    border: 1px solid rgba(255, 0, 0, 0.1);
}

#cookie-accept:hover {
    background: linear-gradient(145deg, #ff3333 0%, #e60000 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

#cookie-accept:active {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(255, 0, 0, 0.2);
}

#cookie-save {
    background: linear-gradient(145deg, #f5f5dc 0%, #e6e6cf 100%);
    color: #3b484c;
    border: 1px solid rgba(59, 72, 76, 0.1);
    box-shadow: 0 2px 8px rgba(59, 72, 76, 0.1);
}

#cookie-save:hover {
    background: linear-gradient(145deg, #f8f8e6 0%, #eaeadc 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 72, 76, 0.15);
}

#cookie-save:active {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(59, 72, 76, 0.1);
}

/* Small note */
#cookie-banner small {
  color: #3b484c;
  display:block;
  margin-top:8px;
  font-size:0.85rem;
}

/* Responsive */
@media (max-width:600px){
  #cookie-banner .col.left,
  #cookie-banner .col.right {
    display:block;
    width:100%;
    text-align:left;
  }
  #cookie-banner {
    left: 8px;
    right: 8px;
    bottom: 12px;
    padding:12px;
  }
}

/* Accessibility focus styles */
#cookie-banner .btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.2);
}

/* optional small visual tweak for footer link alignment */
#cookie-settings {
  cursor: pointer;
  color: #3b484c;
}