/* ALTO Consent 1.0: Farben über die Variablen an das eigene Branding anpassen */
:root {
  --cc-bg: #ffffff;
  --cc-fg: #1c1d21;
  --cc-muted: #5b5e66;
  --cc-line: #d9dbe0;
  --cc-surface: #f3f4f6;
  --cc-accent: #1c1d21;
  --cc-accent-fg: #ffffff;
  --cc-focus: #2f6fed;
  --cc-radius: 6px;
  --cc-font: inherit;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cc-bg: #1d1f24;
    --cc-fg: #eef0f3;
    --cc-muted: #a9adb6;
    --cc-line: #3a3d45;
    --cc-surface: #262930;
    --cc-accent: #eef0f3;
    --cc-accent-fg: #1d1f24;
    --cc-focus: #7ea6ff;
  }
}

.cc-banner, .cc-modal, .cc-float, .cc-ph {
  font-family: var(--cc-font);
  color: var(--cc-fg);
  line-height: 1.5;
  box-sizing: border-box;
}
.cc-banner *, .cc-modal *, .cc-ph * { box-sizing: border-box; }

.cc-title { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 600; }
.cc-links { margin: .75rem 0 0; font-size: .85rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.cc-links a, .cc-ph a { color: inherit; text-underline-offset: 2px; }

/* Buttons: Ablehnen und Akzeptieren sind bewusst identisch gestaltet */
.cc-btn {
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  padding: .7rem 1.2rem;
  border-radius: var(--cc-radius);
  border: 1px solid var(--cc-accent);
  background: var(--cc-accent);
  color: var(--cc-accent-fg);
  cursor: pointer;
  min-height: 44px;
}
.cc-btn:hover { opacity: .88; }
.cc-btn--quiet { background: transparent; color: var(--cc-fg); }
.cc-btn--small { padding: .35rem .8rem; min-height: 36px; font-size: .85rem; }
.cc-btn:focus-visible, .cc-float:focus-visible, .cc-banner a:focus-visible,
.cc-modal a:focus-visible, .cc-modal summary:focus-visible, .cc-row input:focus-visible {
  outline: 3px solid var(--cc-focus);
  outline-offset: 2px;
}

/* Banner */
.cc-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 2147483000;
  background: var(--cc-bg);
  border-top: 1px solid var(--cc-line);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .12);
  outline: none;
}
.cc-banner[hidden] { display: none; }
.cc-banner__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  gap: 1.5rem;
  align-items: flex-end;
}
.cc-banner__text { flex: 1 1 auto; max-width: 70ch; }
.cc-banner__text p { margin: 0; font-size: .92rem; color: var(--cc-muted); }
.cc-banner .cc-links { color: var(--cc-fg); }

.cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; flex: 0 0 auto; }
.cc-actions .cc-btn--quiet { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .cc-banner__inner { flex-direction: column; align-items: stretch; padding: 1rem; }
  .cc-banner__text { max-height: 40vh; overflow-y: auto; }
}

/* Einstellungsdialog */
.cc-modal {
  width: min(640px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 1px solid var(--cc-line);
  border-radius: calc(var(--cc-radius) * 2);
  background: var(--cc-bg);
  display: none;
  flex-direction: column;
}
.cc-modal[open] { display: flex; }
.cc-modal::backdrop { background: rgba(0, 0, 0, .45); }
.cc-modal__head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--cc-line);
}
.cc-modal__head .cc-title { margin: 0; }
.cc-modal__body { padding: 1rem 1.25rem; overflow-y: auto; }
.cc-modal__body > p { margin: 0 0 1rem; font-size: .92rem; color: var(--cc-muted); }
.cc-modal__foot {
  grid-template-columns: repeat(3, 1fr);
  padding: 1rem 1.25rem; border-top: 1px solid var(--cc-line);
}
@media (max-width: 560px) { .cc-modal__foot { grid-template-columns: 1fr; } }

.cc-cat { padding: .9rem 0; border-bottom: 1px solid var(--cc-line); }
.cc-cat:first-of-type { padding-top: 0; }
.cc-cat__desc { margin: .25rem 0 0 1.9rem; font-size: .88rem; color: var(--cc-muted); }
.cc-row { display: flex; align-items: center; gap: .75rem; cursor: pointer; }
.cc-row input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--cc-accent); flex: none; }
.cc-row input:disabled { cursor: not-allowed; }
.cc-row__label { font-weight: 600; }

.cc-services { margin: .6rem 0 0 1.9rem; }
.cc-services summary { cursor: pointer; font-size: .88rem; }
.cc-svc { margin-top: .6rem; padding: .75rem; background: var(--cc-surface); border-radius: var(--cc-radius); }
.cc-svc .cc-row__label { font-weight: 500; }
.cc-svc__facts { margin: .5rem 0 0 1.9rem; display: grid; grid-template-columns: max-content 1fr; gap: .2rem .75rem; font-size: .84rem; }
.cc-svc__facts dt { color: var(--cc-muted); }
.cc-svc__facts dd { margin: 0; }

/* Zwei-Klick-Platzhalter */
.cc-embed { width: 100%; }
.cc-embed > template { display: none; }
.cc-ph {
  padding: 2rem 1.5rem;
  min-height: 280px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .6rem;
  background: var(--cc-surface);
  border: 1px dashed var(--cc-line);
  border-radius: calc(var(--cc-radius) * 2);
}
.cc-ph p { margin: 0; max-width: 62ch; }
.cc-ph__title { font-size: 1.1rem; font-weight: 600; }
.cc-ph__text { font-size: .92rem; color: var(--cc-muted); }
.cc-ph__meta { font-size: .82rem; color: var(--cc-muted); }
.cc-ph .cc-btn { margin-top: .5rem; }

@media (prefers-reduced-motion: no-preference) {
  .cc-banner:not([hidden]) { animation: cc-in .25s ease-out; }
  @keyframes cc-in { from { transform: translateY(100%); } to { transform: none; } }
}