/* ==========================================================================
   Cookie-Consent — DSGVO/TTDSG-konform
   - Equal-prominence Buttons (Accept = Reject)
   - Granulare Kategorien
   - Reopen-Floating-Button
   ========================================================================== */

.cc-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(15, 23, 42, .55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  animation: cc-fade .2s ease-out;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
@keyframes cc-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (min-width: 720px) {
  .cc-overlay {
    align-items: center;
    padding: 1.2rem;
  }
}

.cc-modal {
  background: #fff;
  color: #1c2330;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 1rem);
  overflow-y: auto;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -10px 50px rgba(0, 0, 0, .35);
  display: flex;
  flex-direction: column;
  animation: cc-slide-up .25s cubic-bezier(.2, .8, .3, 1);
}
@keyframes cc-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@media (min-width: 720px) {
  .cc-modal {
    border-radius: 14px;
    max-height: 86vh;
  }
}

.cc-head {
  padding: 1.4rem 1.5rem 1rem;
  border-bottom: 1px solid #ebebe5;
}
.cc-head h2 {
  margin: 0 0 .5rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #1c2330;
}
.cc-head p {
  margin: 0 0 .55rem;
  font-size: .92rem;
  line-height: 1.55;
  color: #3a4252;
}
.cc-links {
  font-size: .82rem;
  color: #6b7380;
}
.cc-links a {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cc-details {
  padding: 0;
  border-bottom: 1px solid #ebebe5;
}
.cc-details > summary {
  cursor: pointer;
  padding: .85rem 1.5rem;
  font-size: .87rem;
  font-weight: 500;
  color: #2563eb;
  list-style: none;
  user-select: none;
  position: relative;
  background: #f7f9fc;
  transition: background .15s;
}
.cc-details > summary::-webkit-details-marker { display: none; }
.cc-details > summary:hover { background: #eef2f7; }
.cc-details > summary::after {
  content: '';
  position: absolute;
  right: 1.5rem;
  top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid #2563eb;
  border-bottom: 2px solid #2563eb;
  transform: translateY(-65%) rotate(45deg);
  transition: transform .2s;
}
.cc-details[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }

.cc-cats {
  padding: .8rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cc-cat {
  background: #fafbfc;
  border: 1px solid #ebebe5;
  border-radius: 10px;
  padding: 1rem 1.1rem;
}
.cc-cat-head {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}
.cc-cat-meta { flex: 1; min-width: 0; }
.cc-cat-meta strong {
  font-size: .95rem;
  color: #1c2330;
}
.cc-cat-meta p {
  margin: .25rem 0 0;
  font-size: .82rem;
  color: #5a6478;
  line-height: 1.5;
}
.cc-pill {
  display: inline-block;
  margin-left: .4rem;
  background: #ecfdf5;
  color: #166534;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  border-radius: 999px;
  border: 1px solid #bbf7d0;
}

/* iOS-Style Toggle */
.cc-toggle {
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  margin-top: .15rem;
}
.cc-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cc-toggle-track {
  display: block;
  width: 44px;
  height: 24px;
  background: #cbd5e1;
  border-radius: 999px;
  position: relative;
  transition: background .2s;
}
.cc-toggle-thumb {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: left .2s;
}
.cc-toggle input:checked + .cc-toggle-track {
  background: #2563eb;
}
.cc-toggle input:checked + .cc-toggle-track .cc-toggle-thumb {
  left: 22px;
}
.cc-toggle input:disabled + .cc-toggle-track {
  background: #16a34a;
  opacity: .8;
  cursor: not-allowed;
}

.cc-svc-list {
  list-style: none;
  margin: .9rem 0 0;
  padding: .8rem 0 0;
  border-top: 1px dashed #d4d8e0;
}
.cc-svc-list li + li {
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px dashed #d4d8e0;
}
.cc-svc-list strong {
  font-size: .85rem;
  color: #1c2330;
}
.cc-svc-provider {
  font-size: .8rem;
  color: #5a6478;
  font-weight: 400;
}
.cc-svc-purpose {
  margin: .25rem 0 .3rem;
  font-size: .8rem;
  color: #4a5266;
  line-height: 1.5;
}
.cc-svc-cookies {
  margin: 0;
  font-size: .76rem;
  color: #6b7380;
}
.cc-svc-cookies code {
  background: #fff;
  padding: .1rem .35rem;
  border: 1px solid #e4e8ee;
  border-radius: 3px;
  font-size: .72rem;
}
.cc-svc-link {
  margin: .3rem 0 0;
  font-size: .76rem;
}
.cc-svc-link a {
  color: #2563eb;
  text-decoration: underline;
}

.cc-actions {
  padding: 1rem 1.5rem 1.3rem;
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  background: #fafbfc;
  border-radius: 0 0 14px 14px;
}
.cc-btn {
  flex: 1 1 calc(50% - .3rem);
  min-width: 140px;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: .8rem 1rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
  text-align: center;
}
.cc-btn:active { transform: translateY(1px); }
.cc-btn-primary {
  background: #2563eb;
  color: #fff;
}
.cc-btn-primary:hover { background: #1d4ed8; }
.cc-btn-reject {
  /* Equal prominence — exakt gleicher Style wie Accept (BGH-konform) */
  background: #2563eb;
  color: #fff;
}
.cc-btn-reject:hover { background: #1d4ed8; }
.cc-btn-secondary {
  flex-basis: 100%;
  background: transparent;
  color: #2563eb;
  border-color: #cbd5e1;
}
.cc-btn-secondary:hover {
  background: #eff6ff;
  border-color: #2563eb;
}

@media (min-width: 540px) {
  .cc-btn-secondary { flex-basis: 100%; }
}

/* Reopen-Floating-Button */
.cc-reopen {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 99998;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #d4d8e0;
  background: #fff;
  color: #1c2330;
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
  transition: transform .15s, box-shadow .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.cc-reopen:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.cc-reopen:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .4);
  outline-offset: 2px;
}
/* Wenn Banner offen: Reopen-Knopf ausblenden */
.cc-active .cc-reopen { display: none; }

/* Unterhalb Sidebar/Helpers nicht überlagern */
@media (max-width: 720px) {
  .cc-reopen { left: .8rem; bottom: .8rem; width: 40px; height: 40px; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .cc-modal {
    background: #1a2238;
    color: #e4e8f1;
  }
  .cc-head { border-color: #2a3454; }
  .cc-head h2 { color: #fff; }
  .cc-head p { color: #c7cdd9; }
  .cc-cat {
    background: #131a2c;
    border-color: #2a3454;
  }
  .cc-cat-meta strong { color: #fff; }
  .cc-cat-meta p, .cc-svc-purpose { color: #99a3bb; }
  .cc-svc-list strong { color: #fff; }
  .cc-actions { background: #131a2c; }
  .cc-btn-secondary { color: #60a5fa; border-color: #2a3454; }
  .cc-btn-secondary:hover { background: #131a2c; border-color: #60a5fa; }
  .cc-details > summary { background: #131a2c; color: #60a5fa; }
  .cc-details > summary:hover { background: #232c45; }
  .cc-details > summary::after { border-color: #60a5fa; }
  .cc-svc-cookies code { background: #232c45; border-color: #2a3454; color: #c7cdd9; }
  .cc-reopen { background: #1a2238; color: #e4e8f1; border-color: #2a3454; }
}

/* Ausgeblendete Inhalte sind während des Banner-Layouts sicher unsichtbar */
[type="text/plain"][data-cc-service] { display: none; }