/*
 * cf-shared – Cookie-Consent-Manager (Styling)
 * Gehoert zu cf-shared/assets/js/cookie-consent.js und cf-shared/ui/cookie-banner/.
 *
 * Bewusst self-contained und eigener Namespace (.cfcc-*): funktioniert in JEDER App,
 * unabhaengig davon, ob Bootstrap geladen ist. Farben laufen ueber CSS-Variablen,
 * damit Dark/Light sowohl ueber Bootstraps data-bs-theme als auch ueber die
 * System-Praeferenz greift.
 */

.cfcc {
  /* Light-Defaults */
  --cfcc-bg: #ffffff;
  --cfcc-fg: #1f2733;
  --cfcc-muted: #5b6472;
  --cfcc-border: #e2e6ec;
  --cfcc-shadow: 0 -2px 24px rgba(15, 23, 42, 0.18);
  --cfcc-primary: #2563eb;
  --cfcc-primary-fg: #ffffff;
  --cfcc-btn-bg: #eef1f6;
  --cfcc-btn-fg: #1f2733;
  --cfcc-track: #cbd2dc;
  --cfcc-track-on: #2563eb;
  --cfcc-knob: #ffffff;
  --cfcc-link: #2563eb;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483000; /* ueber allem, aber unter Browser-UI */
  display: flex;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
.cfcc[hidden] { display: none; }
.cfcc *, .cfcc *::before, .cfcc *::after { box-sizing: border-box; }

/* Dunkles Schema ueber System-Praeferenz, solange nicht ausdruecklich "light" gesetzt ist */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) .cfcc {
    --cfcc-bg: #1b2230;
    --cfcc-fg: #e8ecf2;
    --cfcc-muted: #9aa4b2;
    --cfcc-border: #2c3647;
    --cfcc-shadow: 0 -2px 24px rgba(0, 0, 0, 0.5);
    --cfcc-btn-bg: #2a3444;
    --cfcc-btn-fg: #e8ecf2;
    --cfcc-track: #465063;
    --cfcc-knob: #e8ecf2;
    --cfcc-link: #6ea8fe;
  }
}
/* Dunkles Schema explizit ueber Bootstrap-Attribut (hat Vorrang) */
[data-bs-theme="dark"] .cfcc {
  --cfcc-bg: #1b2230;
  --cfcc-fg: #e8ecf2;
  --cfcc-muted: #9aa4b2;
  --cfcc-border: #2c3647;
  --cfcc-shadow: 0 -2px 24px rgba(0, 0, 0, 0.5);
  --cfcc-btn-bg: #2a3444;
  --cfcc-btn-fg: #e8ecf2;
  --cfcc-track: #465063;
  --cfcc-knob: #e8ecf2;
  --cfcc-link: #6ea8fe;
}

.cfcc-card {
  width: 100%;
  max-width: 720px;
  background: var(--cfcc-bg);
  color: var(--cfcc-fg);
  border: 1px solid var(--cfcc-border);
  border-radius: 14px;
  box-shadow: var(--cfcc-shadow);
  padding: 20px 22px;
}

.cfcc-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}
.cfcc-text {
  margin: 0 0 16px;
  color: var(--cfcc-fg);
}
.cfcc-text a, .cfcc-cat-desc a { color: var(--cfcc-link); }

/* Buttons */
.cfcc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cfcc-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  background: var(--cfcc-btn-bg);
  color: var(--cfcc-btn-fg);
  transition: filter .15s ease;
}
.cfcc-btn:hover { filter: brightness(0.96); }
.cfcc-btn:focus-visible { outline: 2px solid var(--cfcc-primary); outline-offset: 2px; }
.cfcc-btn-primary {
  background: var(--cfcc-primary);
  color: var(--cfcc-primary-fg);
}
.cfcc-btn-link {
  background: transparent;
  color: var(--cfcc-link);
  padding-left: 8px;
  padding-right: 8px;
}
.cfcc-actions--primary-right { justify-content: flex-start; }

/* Kategorien */
.cfcc-cats {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.cfcc-cat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--cfcc-border);
  border-radius: 10px;
}
.cfcc-cat-name { font-weight: 600; }
.cfcc-cat-desc { margin: 3px 0 0; font-size: 13.5px; color: var(--cfcc-muted); }

/* Toggle-Switch (reines CSS) */
.cfcc-switch {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  margin-top: 2px;
}
.cfcc-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.cfcc-slider {
  position: absolute;
  inset: 0;
  background: var(--cfcc-track);
  border-radius: 999px;
  transition: background .15s ease;
  pointer-events: none;
}
.cfcc-slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--cfcc-knob);
  border-radius: 50%;
  transition: transform .15s ease;
}
.cfcc-switch input:checked + .cfcc-slider { background: var(--cfcc-track-on); }
.cfcc-switch input:checked + .cfcc-slider::before { transform: translateX(20px); }
.cfcc-switch input:disabled { cursor: not-allowed; }
.cfcc-switch input:disabled + .cfcc-slider { opacity: 0.6; }
.cfcc-switch input:focus-visible + .cfcc-slider { outline: 2px solid var(--cfcc-primary); outline-offset: 2px; }

@media (max-width: 560px) {
  .cfcc { padding: 10px; }
  .cfcc-card { padding: 16px; border-radius: 12px; }
  .cfcc-actions { flex-direction: column; }
  .cfcc-btn { width: 100%; }
  .cfcc-btn-link { order: 3; }
}