/* WebDesigner Consent v2: neutrale Basis. Die Marke setzt nur die --cc-* Tokens (siehe theme.css des Kunden). */

.cc-root {
  --cc-bg: #17191c;
  --cc-fg: #f8f7f4;
  --cc-muted: #a3a8af;
  --cc-line: rgba(255, 255, 255, .14);
  --cc-accent: #b89758;
  --cc-accent-fg: #17191c;
  --cc-reject-fg: #f8f7f4;
  --cc-reject-line: rgba(255, 255, 255, .55);
  --cc-focus: #d4b87e;
  --cc-radius: .75rem;
  --cc-gap: 1rem;
  --cc-font: inherit;
  --cc-font-display: var(--cc-font);
  --cc-font-label: var(--cc-font);
  --cc-z: 10000;
  font-family: var(--cc-font);
  color: var(--cc-fg);
  box-sizing: border-box;
}
.cc-root *, .cc-root *::before, .cc-root *::after { box-sizing: border-box; }

/* ---- erste Ebene: ruhige Karte unten links, blockiert die Seite nicht ---- */
.cc-banner {
  position: fixed;
  left: var(--cc-gap);
  bottom: var(--cc-gap);
  width: min(30rem, calc(100vw - 2 * var(--cc-gap)));
  z-index: var(--cc-z);
  padding: 1.25rem 1.375rem 1rem;
  background: var(--cc-bg);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}
.cc-banner[hidden] { display: none; }
.cc-banner.is-visible { opacity: 1; transform: none; }

.cc-title {
  margin: 0 0 .5rem;
  font: 600 1.15rem/1.25 var(--cc-font-display);
  color: var(--cc-fg);
}
.cc-text {
  margin: 0 0 1rem;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--cc-muted);
}
.cc-text a { color: var(--cc-fg); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Buttons: Ablehnen und Zustimmen sind gleich gross und gleich gewichtet ---- */
.cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
.cc-actions--3 { grid-template-columns: repeat(3, 1fr); }
.cc-btn {
  appearance: none;
  min-height: 2.75rem;
  padding: .55rem .9rem;
  font: 600 .9rem/1.2 var(--cc-font-label);
  text-align: center;
  cursor: pointer;
  border-radius: calc(var(--cc-radius) * .7);
  border: 1.5px solid var(--cc-accent);
  background: var(--cc-accent);
  color: var(--cc-accent-fg);
}
.cc-btn--reject, .cc-btn--save {
  background: transparent;
  border-color: var(--cc-reject-line);
  color: var(--cc-reject-fg);
}
.cc-btn:hover { filter: brightness(1.08); }
.cc-link {
  display: block;
  margin: .75rem auto 0;
  padding: .35rem .5rem;
  background: none;
  border: 0;
  font: 500 .85rem/1.2 var(--cc-font);
  color: var(--cc-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cc-link:hover { color: var(--cc-fg); }
.cc-root :focus-visible { outline: 2px solid var(--cc-focus); outline-offset: 2px; }

/* ---- zweite Ebene: Dialog ---- */
.cc-dialog {
  width: min(36rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: 1.5rem;
  background: var(--cc-bg);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6);
}
.cc-dialog::backdrop { background: rgba(10, 8, 6, .55); }
.cc-x {
  position: absolute; top: .6rem; right: .75rem;
  width: 2.5rem; height: 2.5rem;
  background: none; border: 0; cursor: pointer;
  font-size: 1.7rem; line-height: 1; color: var(--cc-muted);
}
.cc-x:hover { color: var(--cc-fg); }
.cc-cats { display: grid; margin: 0 0 1.25rem; border-top: 1px solid var(--cc-line); }
.cc-cat {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--cc-line);
}
.cc-cat-title { font: 600 1rem/1.3 var(--cc-font-display); color: var(--cc-fg); }
.cc-cat-desc { margin-top: .2rem; font-size: .875rem; line-height: 1.45; color: var(--cc-muted); }

.cc-switch { position: relative; flex: none; width: 2.75rem; height: 1.6rem; margin-top: .1rem; }
.cc-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cc-switch input:disabled { cursor: not-allowed; }
.cc-slider {
  position: absolute; inset: 0; border-radius: 99px;
  background: var(--cc-reject-line); opacity: .55; pointer-events: none;
  transition: background .2s, opacity .2s;
}
.cc-slider::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.6rem - 6px); height: calc(1.6rem - 6px);
  border-radius: 50%; background: var(--cc-bg); transition: transform .2s;
}
.cc-switch input:checked + .cc-slider { background: var(--cc-accent); opacity: 1; }
.cc-switch input:checked + .cc-slider::before { transform: translateX(1.15rem); background: var(--cc-accent-fg); }
.cc-switch input:disabled + .cc-slider { opacity: .45; }
.cc-switch input:focus-visible + .cc-slider { outline: 2px solid var(--cc-focus); outline-offset: 2px; }

/* ---- Platzhalter für gesperrte Einbettungen ---- */
.cc-media-host:not(:has(iframe)) { display: block; }
.cc-media {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
  min-height: 14rem; padding: 1.5rem; text-align: center;
  background: var(--cc-bg); color: var(--cc-fg); border: 1px dashed var(--cc-line);
  border-radius: var(--cc-radius); font-family: var(--cc-font);
}
.cc-media p { margin: 0; max-width: 28rem; color: var(--cc-muted); }

.cc-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
  .cc-banner { left: .5rem; right: .5rem; bottom: .5rem; width: auto; padding: 1.1rem 1.1rem .75rem; }
  .cc-actions--3 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-banner, .cc-slider, .cc-slider::before { transition: none; }
}