/********** C O O K I E - B A N N E R **********/

#cookie-banner-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(1, 8, 66, 0.5);
   z-index: 9998;
}

#cookie-banner-overlay.show {
   display: block;
}

#cookie-banner {
   display: none;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   background: #ffffff;
   box-shadow: 0 -4px 20px rgba(1, 8, 66, 0.15);
   z-index: 9999;
   max-height: 90vh;
   overflow-y: auto;
   font-family: var(--haas-font), sans-serif;
}

#cookie-banner.show {
   display: block;
   animation: cookieSlideUp 0.3s ease;
}

@keyframes cookieSlideUp {
   from { transform: translateY(100%); }
   to { transform: translateY(0); }
}

.cookie-content {
   max-width: 1200px;
   margin: 0 auto;
   padding: 30px;
}

.cookie-header h2 {
   margin: 0 0 10px 0;
   font-size: 1.5rem;
   line-height: 1.8rem;
   width: auto;
   color: var(--darkblue);
}

.cookie-header p {
   margin: 0 0 20px 0;
   color: var(--middlegrey);
   font-size: 0.85rem;
   line-height: 1.35rem;
}

/* Erklärender Satz, wenn der Banner über den Chat-Hinweisknopf geöffnet wurde.
   Im Normalfall per hidden-Attribut ausgeblendet. */
.cookie-chat-hint {
   margin: 0 0 20px 0;
   padding: 12px 16px;
   border-left: 3px solid var(--jadegruen);
   background: var(--superlightjadegruen);
   color: var(--darkblue);
   font-size: 0.85rem;
   line-height: 1.35rem;
   font-weight: 500;
}

.cookie-chat-hint[hidden] {
   display: none;
}

/********** K A T E G O R I E N **********/

#cookie-categories {
   display: none;
   margin: 20px 0;
}

#cookie-categories.show {
   display: block;
}

.cookie-category {
   background: var(--lightgrey);
   border-radius: 8px;
   padding: 16px;
   margin-bottom: 12px;
   border: 1px solid var(--mediumlightgrey);
}

.cookie-category-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 8px;
   gap: 16px;
}

.cookie-category-title {
   font-weight: 600;
   color: var(--darkblue);
   font-size: 0.95rem;
}

.cookie-category-desc {
   color: var(--middlegrey);
   font-size: 0.8rem;
   line-height: 1.25rem;
}

/* Schalter. Bewusst .cookie-toggle statt .toggle - .toggle ist im Projekt
   bereits vergeben, js/app.js setzt sie auf den Burger der Navigation. */
.cookie-toggle {
   position: relative;
   flex: 0 0 auto;
   width: 48px;
   height: 24px;
}

.cookie-toggle input {
   opacity: 0;
   width: 0;
   height: 0;
}

.cookie-slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: var(--mediumlightgrey);
   border-radius: 24px;
   transition: 0.3s;
}

.cookie-slider:before {
   position: absolute;
   content: "";
   height: 18px;
   width: 18px;
   left: 3px;
   bottom: 3px;
   background-color: #ffffff;
   border-radius: 50%;
   transition: 0.3s;
}

.cookie-toggle input:checked + .cookie-slider {
   background-color: var(--darkblue);
}

.cookie-toggle input:checked + .cookie-slider:before {
   transform: translateX(24px);
}

.cookie-toggle input:disabled + .cookie-slider {
   background-color: var(--jadegruen);
   cursor: not-allowed;
}

.cookie-toggle input:focus-visible + .cookie-slider {
   outline: 2px solid var(--cyan);
   outline-offset: 2px;
}

/********** B U T T O N S **********/

.cookie-actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
}

/* width muss explizit stehen: css/button.css setzt global button { width: 80vw },
   was sonst die nicht flex-gesteuerten Schaltflaechen aus dem Banner treibt. */
.cc-btn {
   width: auto;
   padding: 12px 24px;
   border: none;
   border-radius: 8px;
   font-family: var(--haas-font), sans-serif;
   font-size: 0.8rem;
   font-weight: 600;
   letter-spacing: 1px;
   cursor: pointer;
   flex: 1;
   min-width: 150px;
}

.cc-btn-primary {
   background: var(--darkblue);
   color: #fff;
   border: none;
}

.cc-btn-primary:hover {
   opacity: 0.7;
   transition: opacity 0.25s ease;
}

/* Ablehnen ist gleichwertig zu "Alle akzeptieren": gleiche Groesse ueber
   .cc-btn, ebenso solide, nur in einer anderen Farbe zur Unterscheidung. */
.cc-btn-reject {
   background: var(--jadegruen);
   color: var(--darkblue);
   border: none;
}

.cc-btn-reject:hover {
   opacity: 0.7;
   transition: opacity 0.25s ease;
}

.cc-btn-text {
   background: transparent;
   color: var(--middlegrey);
   text-decoration: underline;
   flex: 0 0 auto;
   min-width: auto;
}

.cc-btn-text:hover {
   color: var(--darkblue);
}

#save-preferences {
   display: block;
   width: 100%;
   margin-top: 4px;
}

/* Widerruf: sitzt seit dem Pill-Umbau als Kachel IN der unteren Leiste, nicht
   mehr als eigener schwebender Knopf unten links. Aussehen und Hover kommen
   deshalb aus den .aktuell-item-Regeln in css/style.css; hier bleibt nur die
   Zentrierung des Icons. Die id ist unveraendert - js/cookie.js findet den
   Knopf weiterhin per getElementById. */

.cookie-privacy-links {
   margin-top: 15px;
   font-size: 0.75rem;
   color: var(--middlegrey);
}

.cookie-privacy-links a {
   color: var(--darkblue);
   text-decoration: none;
}

.cookie-privacy-links a:hover {
   text-decoration: underline;
}

#cookie-settings-btn {
   display: flex;
   align-items: center;
   justify-content: center;
}

@media screen and (max-width: 768px) {
   .cookie-content {
      padding: 20px;
   }

   .cookie-actions {
      flex-direction: column;
   }

   .cc-btn {
      width: 100%;
   }
}