/* Cookie-Einstellungen im Designsystem von Costa & McLaren */
.cc-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 30px;
  z-index: 80;
  font-family: inherit;
  color: var(--grau-900, #1C1B19);
  background: var(--white, #fff);
  border: 1px solid var(--grau-200, #E4E3DF);
  border-radius: var(--radius-card, 8px);
  box-shadow: 0 18px 60px rgba(8, 31, 58, 0.18);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.cc-banner.cc-visible { opacity: 1; transform: translateY(0); }
.cc-banner[hidden], .cc-modal-overlay[hidden], .cc-revoke[hidden] { display: none !important; }

.cc-banner h2,
.cc-modal h2 {
  margin: 0 0 10px;
  color: var(--navy-deep, #081F3A);
  font-family: inherit;
  font-size: var(--text-2xl, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.018em;
}

.cc-banner p,
.cc-modal > p {
  margin: 0 0 22px;
  color: var(--grau-650, #5F5E58);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.65;
}

.cc-banner a,
.cc-modal a {
  color: var(--accent-ink, #0E5C8A);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cc-buttons,
.cc-modal-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cc-btn {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--navy-deep, #081F3A);
  border-radius: var(--radius-btn, 4px);
  background: var(--white, #fff);
  color: var(--navy-deep, #081F3A);
  font-family: inherit;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 120ms ease;
}

.cc-btn:hover { background: var(--navy-pale, #EDF2F8); }
.cc-btn:active { transform: translateY(1px); }
.cc-btn:focus-visible,
.cc-revoke:focus-visible {
  outline: 3px solid var(--accent, #2E9BD6);
  outline-offset: 3px;
}

.cc-btn[data-cc-action="accept"],
.cc-btn[data-cc-action="save"] {
  background: var(--accent, #2E9BD6);
  border-color: var(--accent, #2E9BD6);
  color: var(--navy-deep, #081F3A);
}

.cc-btn[data-cc-action="accept"]:hover,
.cc-btn[data-cc-action="save"]:hover {
  background: #4FAEE0;
  border-color: #4FAEE0;
}

.cc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 31, 58, 0.78);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 180ms ease;
}

.cc-modal-overlay.cc-visible { opacity: 1; }

.cc-modal {
  width: 100%;
  max-width: 680px;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 34px;
  font-family: inherit;
  color: var(--grau-900, #1C1B19);
  background: var(--white, #fff);
  border: 1px solid var(--grau-200, #E4E3DF);
  border-radius: var(--radius-card, 8px);
  box-shadow: 0 24px 70px rgba(8, 31, 58, 0.28);
}

.cc-category {
  padding: 18px 0;
  border-top: 1px solid var(--grau-200, #E4E3DF);
}

.cc-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 8px;
}

.cc-category-title {
  margin: 0;
  color: var(--navy-deep, #081F3A);
  font-size: var(--text-base, 1rem);
  font-weight: 600;
}

.cc-category-desc,
.cc-category-details,
.cc-note {
  color: var(--grau-650, #5F5E58);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.6;
}

.cc-category-desc { margin: 0; }
.cc-category-details { margin-top: 10px; }
.cc-category-details summary { cursor: pointer; color: var(--accent-ink, #0E5C8A); font-weight: 600; }
.cc-category-details table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: var(--text-xs, 0.75rem); }
.cc-category-details th,
.cc-category-details td { padding: 7px 8px; border-bottom: 1px solid var(--grau-200, #E4E3DF); text-align: left; vertical-align: top; }
.cc-category-details th { color: var(--grau-650, #5F5E58); font-weight: 600; }

.cc-toggle { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.cc-toggle input { position: absolute; opacity: 0; }
.cc-slider { position: absolute; inset: 0; border-radius: 13px; background: var(--grau-200, #E4E3DF); cursor: pointer; transition: background 180ms ease; }
.cc-slider::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; border-radius: 50%; background: var(--white, #fff); box-shadow: 0 1px 4px rgba(8, 31, 58, 0.18); transition: transform 180ms ease; }
.cc-toggle input:checked + .cc-slider { background: var(--accent-ink, #0E5C8A); }
.cc-toggle input:checked + .cc-slider::before { transform: translateX(20px); }
.cc-toggle input:disabled + .cc-slider { cursor: not-allowed; opacity: 0.62; }
.cc-toggle input:focus-visible + .cc-slider { outline: 3px solid var(--accent, #2E9BD6); outline-offset: 3px; }

.cc-modal-buttons { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--grau-200, #E4E3DF); }
.cc-note { margin: 18px 0 0; }

.cc-revoke {
  position: static;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-top: 1px solid rgba(237, 242, 248, 0.22);
  border-radius: 0;
  background: var(--navy-deep, #081F3A);
  color: var(--white, #fff);
  font-family: inherit;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: none;
}

.cc-revoke:hover { background: #103554; }

@media (max-width: 620px) {
  .cc-banner { left: 12px; right: 12px; bottom: 12px; padding: 22px 20px; }
  .cc-btn { flex: 1 1 100%; }
  .cc-modal-overlay { padding: 12px; }
  .cc-modal { max-height: calc(100dvh - 24px); padding: 24px 20px; }
  .cc-category-details { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-banner,
  .cc-modal-overlay,
  .cc-btn,
  .cc-slider,
  .cc-slider::before { transition-duration: 0.01ms !important; }
}