/*!
 * Cookie Consent — Styles
 * Alles unter dem Namespace .cc- / #cc-root, um Site-Styles nicht zu beeinflussen.
 *
 * Alle Farben & Größen sind via CSS-Variablen anpassbar — entweder durch
 * Inline-Style (so macht es das WP-Plugin) oder im eigenen CSS:
 *
 *   #cc-root {
 *     --cc-primary:        #0a84ff;   Akzentfarbe (Haupt-Button)
 *     --cc-primary-fg:     #ffffff;   Schrift auf Akzentfarbe
 *     --cc-bg:             #ffffff;   Banner/Modal-Hintergrund
 *     --cc-fg:             #1a1f2c;   Schrift im Banner/Modal
 *     --cc-muted:          #5b6478;   Sekundärtext (Beschreibungen)
 *     --cc-secondary-bg:   #f3f5fa;   "Ablehnen"-Button-Hintergrund
 *     --cc-secondary-fg:   #1a1f2c;   "Ablehnen"-Button-Text
 *     --cc-border:         #e3e6ee;
 *     --cc-radius:         12px;
 *     --cc-font-size:      14px;
 *     --cc-banner-width:   380px;     Maximalbreite Banner (Layout "box")
 *   }
 */
#cc-root {
  --cc-bg:           #ffffff;
  --cc-fg:           #1a1f2c;
  --cc-muted:        #5b6478;
  --cc-border:       #e3e6ee;
  --cc-primary:      #0a84ff;
  --cc-primary-fg:   #ffffff;
  --cc-secondary-bg: #f3f5fa;
  --cc-secondary-fg: #1a1f2c;
  --cc-radius:       12px;
  --cc-font-size:    14px;
  --cc-banner-width: 380px;
  --cc-shadow:       0 8px 30px rgba(15, 23, 42, 0.15);
  --cc-z:            2147483000;
  --cc-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  font-family: var(--cc-font);
  color: var(--cc-fg);
  font-size: var(--cc-font-size);
  line-height: 1.45;
}

#cc-root[data-cc-theme="dark"] {
  --cc-bg:           #161a23;
  --cc-fg:           #ecf0f8;
  --cc-muted:        #a4abbe;
  --cc-border:       #2a3041;
  --cc-secondary-bg: #232838;
  --cc-secondary-fg: #ecf0f8;
  --cc-shadow:       0 8px 30px rgba(0, 0, 0, 0.45);
}

/* ── Banner ─────────────────────────────────────────────────────────── */
/*
 * Trick: Position-Translates landen in CSS-Variablen (--cc-base-x / -y).
 * Damit können wir Animationen mit scale/rotate kombinieren, ohne den
 * "Centering"-Translate zu zerschießen.
 */
#cc-root .cc-banner {
  position: fixed;
  z-index: var(--cc-z);
  background: var(--cc-bg);
  color: var(--cc-fg);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  padding: 16px 18px;
  max-width: var(--cc-banner-width);
  width: calc(100% - 24px);
  box-sizing: border-box;
  --cc-base-x: 0;
  --cc-base-y: 0;
  --cc-origin: bottom right;
  transform: translate(var(--cc-base-x), var(--cc-base-y));
  transform-origin: var(--cc-origin);
}

#cc-root[data-cc-layout="bar"] .cc-banner {
  max-width: none;
  width: 100%;
  left: 0; right: 0; bottom: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  padding: 14px 24px;
  --cc-origin: bottom center;
}
#cc-root[data-cc-layout="bar"] .cc-banner-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
#cc-root[data-cc-layout="bar"] .cc-banner h2 { margin: 0; font-size: 15px; flex-shrink: 0; }
#cc-root[data-cc-layout="bar"] .cc-banner p  { margin: 0; flex: 1 1 auto; }
#cc-root[data-cc-layout="bar"] .cc-banner .cc-actions { margin: 0; flex-shrink: 0; }

#cc-root[data-cc-position="bottom-right"] .cc-banner { right: 12px; bottom: 12px; --cc-origin: bottom right; }
#cc-root[data-cc-position="bottom-left"]  .cc-banner { left: 12px;  bottom: 12px; --cc-origin: bottom left; }
#cc-root[data-cc-position="bottom-center"] .cc-banner {
  left: 50%; bottom: 12px;
  --cc-base-x: -50%;
  --cc-origin: bottom center;
}
#cc-root[data-cc-position="center"] .cc-banner {
  left: 50%; top: 50%;
  --cc-base-x: -50%;
  --cc-base-y: -50%;
  --cc-origin: center;
}

/* ── Animationen ──────────────────────────────────────────────────── */
@keyframes cc-pop-in {
  0%   { opacity: 0; transform: translate(var(--cc-base-x), var(--cc-base-y)) scale(0.7) rotate(-2deg); }
  55%  { opacity: 1; transform: translate(var(--cc-base-x), var(--cc-base-y)) scale(1.04) rotate(0.6deg); }
  80%  {             transform: translate(var(--cc-base-x), var(--cc-base-y)) scale(0.985) rotate(-0.2deg); }
  100% { opacity: 1; transform: translate(var(--cc-base-x), var(--cc-base-y)) scale(1) rotate(0); }
}

@keyframes cc-flip-away {
  0%   { opacity: 1; transform: translate(var(--cc-base-x), var(--cc-base-y)) scale(1) rotate(0); }
  25%  { opacity: 1; transform: translate(var(--cc-base-x), calc(var(--cc-base-y) - 10px)) scale(1.02) rotate(-3deg); }
  100% { opacity: 0; transform: translate(var(--cc-base-x), calc(var(--cc-base-y) - 130vh)) scale(0.55) rotate(-22deg); }
}

#cc-root .cc-banner.cc-anim-in {
  animation: cc-pop-in 520ms cubic-bezier(0.34, 1.4, 0.5, 1) both;
}
#cc-root .cc-banner.cc-anim-out {
  animation: cc-flip-away 620ms cubic-bezier(0.55, 0.05, 0.7, 0.4) both;
}

/* Modal: dezenter Pop-In */
@keyframes cc-modal-pop {
  0%   { opacity: 0; transform: scale(0.92) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes cc-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#cc-root .cc-modal:not([hidden]):not(.cc-modal-closing) .cc-modal-backdrop { animation: cc-modal-fade 220ms ease both; }
#cc-root .cc-modal:not([hidden]):not(.cc-modal-closing) .cc-modal-dialog   { animation: cc-modal-pop  320ms cubic-bezier(0.34, 1.4, 0.5, 1) both; }

@keyframes cc-modal-pop-out {
  from { opacity: 1; transform: scale(1)    translateY(0); }
  to   { opacity: 0; transform: scale(0.94) translateY(8px); }
}
@keyframes cc-modal-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
#cc-root .cc-modal.cc-modal-closing .cc-modal-backdrop { animation: cc-modal-fade-out 220ms ease both; }
#cc-root .cc-modal.cc-modal-closing .cc-modal-dialog   { animation: cc-modal-pop-out  240ms ease both; }

@media (prefers-reduced-motion: reduce) {
  #cc-root .cc-banner.cc-anim-in,
  #cc-root .cc-banner.cc-anim-out,
  #cc-root .cc-modal-backdrop,
  #cc-root .cc-modal-dialog {
    animation: none !important;
  }
}

#cc-root .cc-banner h2 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
}
#cc-root .cc-banner p {
  margin: 0 0 12px;
  color: var(--cc-muted);
  font-size: 0.93em;
}
#cc-root .cc-banner a { color: var(--cc-primary); text-decoration: underline; }

#cc-root .cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
#cc-root .cc-btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.93em;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .04s ease, opacity .15s ease, background .15s ease;
  line-height: 1.2;
  white-space: nowrap;
}
#cc-root .cc-btn:active { transform: translateY(1px); }
#cc-root .cc-btn-primary {
  background: var(--cc-primary);
  color: var(--cc-primary-fg);
}
#cc-root .cc-btn-primary:hover { opacity: .92; }
#cc-root .cc-btn-secondary {
  background: var(--cc-secondary-bg);
  color: var(--cc-secondary-fg);
  border-color: var(--cc-border);
}
#cc-root .cc-btn-secondary:hover { background: var(--cc-border); }

/* ── Modal ─────────────────────────────────────────────────────────── */
#cc-root .cc-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--cc-z) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
#cc-root .cc-modal[hidden] { display: none; }
#cc-root .cc-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
#cc-root .cc-modal-dialog {
  position: relative;
  background: var(--cc-bg);
  color: var(--cc-fg);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  width: min(620px, calc(100% - 24px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
}
#cc-root .cc-modal-head,
#cc-root .cc-modal-foot {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#cc-root .cc-modal-head { border-bottom: 1px solid var(--cc-border); justify-content: space-between; }
#cc-root .cc-modal-foot { border-top:    1px solid var(--cc-border); justify-content: flex-end; flex-wrap: wrap; }
#cc-root .cc-modal-head h2 { margin: 0; font-size: 17px; }
#cc-root .cc-modal-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--cc-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
#cc-root .cc-modal-close:hover { background: var(--cc-secondary-bg); color: var(--cc-fg); }

#cc-root .cc-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
}
#cc-root .cc-modal-intro {
  color: var(--cc-muted);
  margin: 0 0 14px;
}
#cc-root .cc-modal-links {
  margin-top: 14px;
  font-size: 12px;
  color: var(--cc-muted);
}
#cc-root .cc-modal-links a {
  color: var(--cc-muted);
  text-decoration: underline;
}

/* ── Kategorien & Toggles ──────────────────────────────────────────── */
#cc-root .cc-cat {
  border: 1px solid var(--cc-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--cc-bg);
}
#cc-root .cc-cat-head { display: flex; align-items: center; }
#cc-root .cc-cat-desc { color: var(--cc-muted); margin: 6px 0 0; font-size: 0.93em; }

#cc-root .cc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
}
#cc-root .cc-toggle input { position: absolute; opacity: 0; pointer-events: none; }
#cc-root .cc-toggle-track {
  width: 36px;
  height: 20px;
  background: var(--cc-border);
  border-radius: 999px;
  position: relative;
  transition: background .15s ease;
  flex-shrink: 0;
}
#cc-root .cc-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
#cc-root .cc-toggle input:checked + .cc-toggle-track { background: var(--cc-primary); }
#cc-root .cc-toggle input:checked + .cc-toggle-track::after { transform: translateX(16px); }
#cc-root .cc-toggle input:disabled + .cc-toggle-track { opacity: .55; cursor: not-allowed; }
#cc-root .cc-toggle-label em { color: var(--cc-muted); font-style: normal; font-weight: 500; font-size: 11px; }

/* ── Service-Details ───────────────────────────────────────────────── */
#cc-root .cc-services { margin-top: 8px; }
#cc-root .cc-service {
  border-top: 1px dashed var(--cc-border);
  padding: 8px 0;
}
#cc-root .cc-service summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--cc-fg);
  font-size: 0.93em;
}
#cc-root .cc-service[open] summary { margin-bottom: 6px; }
#cc-root .cc-service dl {
  margin: 0;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 4px 12px;
  color: var(--cc-muted);
  font-size: 12px;
}
#cc-root .cc-service dt { font-weight: 600; color: var(--cc-fg); }
#cc-root .cc-service ul { margin: 0; padding-left: 16px; }
#cc-root .cc-service code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  background: var(--cc-secondary-bg);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── iframe-Platzhalter ────────────────────────────────────────────── */
.cc-iframe-placeholder {
  background: var(--cc-secondary-bg, #f3f5fa);
  border: 1px dashed #c5cbd9;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  color: var(--cc-fg, #1a1f2c);
}
.cc-iframe-placeholder .cc-iframe-inner { max-width: 480px; margin: 0 auto; }
.cc-iframe-placeholder strong { display: block; margin-bottom: 6px; }
.cc-iframe-placeholder p { margin: 0 0 12px; color: var(--cc-muted, #5b6478); }
.cc-iframe-placeholder .cc-btn {
  font: inherit;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  border: 0;
  background: var(--cc-primary, #0a84ff);
  color: var(--cc-primary-fg, #fff);
  cursor: pointer;
}

/* ── Body-Locks ────────────────────────────────────────────────────── */
body.cc-modal-open { overflow: hidden; }

/* ── Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #cc-root .cc-banner { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; padding: 14px; }
  #cc-root[data-cc-position="center"] .cc-banner { top: 50%; transform: translateY(-50%); }
  #cc-root[data-cc-layout="bar"] .cc-banner-inner { flex-direction: column; align-items: stretch; }
  #cc-root .cc-actions .cc-btn { flex: 1 1 auto; }
  #cc-root .cc-modal-foot .cc-btn { flex: 1 1 auto; }
  #cc-root .cc-service dl { grid-template-columns: 1fr; }
  #cc-root .cc-service dt { margin-top: 4px; }
}