/* Shenflow Consent-Modul - Styles (shared/consent/consent.css)
 * Praefix .sfc-. Nutzt die Design-Tokens der Website (--seal, --jade, --paper, --lacquer ...) mit Fallbacks.
 * Dark nur fuer Banner/Dialog (prefers-color-scheme). Keine Inline-Styles noetig (CSP).
 */

/* Footer-Button ist ohne aktive Tags unsichtbar (Modul dormant) */
[data-sf-consent="open"][hidden] { display: none; }
html.sfc-on [data-sf-consent="open"][hidden] { display: inline-block; }

.sfc-root {
  --sfc-bg: var(--surface, #FFFFFF);
  --sfc-ink: var(--ink, #211F1B);
  --sfc-muted: var(--muted, #6E6A63);
  --sfc-line: var(--line-2, #D9D4C9);
  --sfc-btn-bg: var(--lacquer, #23211C);
  --sfc-btn-ink: #FFFFFF;
  --sfc-link: var(--jade-dark, #2E6B57);
  --sfc-focus: var(--seal, #B23A2E);
  font-family: var(--sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--sfc-ink);
}

@media (prefers-color-scheme: dark) {
  .sfc-root {
    --sfc-bg: #23211C;
    --sfc-ink: #F3F0E8;
    --sfc-muted: #B5B0A5;
    --sfc-line: #4A463E;
    --sfc-btn-bg: #F3F0E8;
    --sfc-btn-ink: #23211C;
    --sfc-link: #8FC4B1;
    --sfc-focus: #F0A79E;
  }
}

.sfc-root *, .sfc-root *::before, .sfc-root *::after { box-sizing: border-box; }
.sfc-root a { color: var(--sfc-link); text-decoration: underline; }

/* Banner */
.sfc-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 960px;
  margin: 0 auto;
  z-index: 2147483000;
  background: var(--sfc-bg);
  border: 1px solid var(--sfc-line);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 24px;
  align-items: center;
}
.sfc-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.sfc-title:focus { outline: none; }
.sfc-title:focus-visible { outline: 2px solid var(--sfc-focus); outline-offset: 3px; }
.sfc-desc { margin: 0; color: var(--sfc-muted); }

.sfc-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: flex-end; }

/* "Alle ablehnen" und "Alle akzeptieren" sind bewusst identisch gestaltet */
.sfc-btn {
  min-height: 44px; min-width: 44px;
  padding: 10px 20px;
  font: inherit; font-weight: 600;
  color: var(--sfc-btn-ink);
  background: var(--sfc-btn-bg);
  border: 1.5px solid var(--sfc-btn-bg);
  border-radius: 8px;
  cursor: pointer;
}
.sfc-btn:hover { opacity: .9; }
.sfc-link {
  min-height: 44px; min-width: 44px;
  padding: 10px 8px;
  font: inherit; font-weight: 500;
  color: var(--sfc-link);
  background: none; border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.sfc-btn:focus-visible, .sfc-link:focus-visible, .sfc-close:focus-visible, .sfc-check:focus-visible, .sfc-root a:focus-visible {
  outline: 2px solid var(--sfc-focus);
  outline-offset: 2px;
}

/* Einstellungs-Dialog */
.sfc-dialog {
  width: calc(100% - 32px);
  max-width: 520px;
  max-height: calc(100% - 32px);
  overflow: auto;
  margin: auto;
  padding: 20px 24px 24px;
  background: var(--sfc-bg);
  color: var(--sfc-ink);
  border: 1px solid var(--sfc-line);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .3);
}
.sfc-dialog::backdrop { background: rgba(20, 18, 15, .55); }
.sfc-dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sfc-dlg-head .sfc-title { font-size: 18px; margin: 0; padding-top: 8px; }
.sfc-close {
  flex: none;
  width: 44px; height: 44px;
  font: inherit; font-size: 26px; line-height: 1;
  color: var(--sfc-muted);
  background: none; border: 0; border-radius: 8px;
  cursor: pointer;
}
.sfc-rows { margin: 16px 0; border-top: 1px solid var(--sfc-line); }
.sfc-row {
  display: flex; gap: 12px; align-items: flex-start;
  min-height: 44px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sfc-line);
  cursor: pointer;
}
.sfc-check { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--jade, #3E7C68); cursor: pointer; }
.sfc-check:disabled { cursor: default; }
.sfc-row-text { display: flex; flex-direction: column; gap: 2px; color: var(--sfc-muted); }
.sfc-row-text strong { color: var(--sfc-ink); }
.sfc-dialog .sfc-actions { justify-content: flex-start; }

@media (max-width: 640px) {
  .sfc-banner { grid-template-columns: 1fr; left: 8px; right: 8px; bottom: 8px; padding: 14px 16px; }
  .sfc-actions { justify-content: stretch; }
  .sfc-actions .sfc-btn { flex: 1 1 100%; }
  .sfc-actions .sfc-link { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: no-preference) {
  .sfc-banner { animation: sfc-in .25s ease-out both; }
  @keyframes sfc-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}