/* Bernina-Theme fürs Consent-Modul: Pergament, Siegelrot, Zertifikatsrahmen.
   Setzt nur Tokens und die Stempel-Form der Schaltflächen, sonst nichts. */
.cc-root {
  --cc-bg: var(--parchment, #F1E7D0);
  --cc-fg: var(--ink, #211A14);
  --cc-muted: var(--ink-soft, #4A3F33);
  --cc-line: var(--paper-line, rgba(33, 26, 20, .14));
  --cc-accent: var(--seal, #8C2318);
  --cc-accent-fg: var(--parchment, #F1E7D0);
  --cc-reject-fg: var(--parchment, #F1E7D0);
  --cc-reject-line: var(--ink, #211A14);
  --cc-focus: var(--verdigris, #007A3D);
  --cc-radius: 0;
  --cc-font: var(--font-body, 'EB Garamond', Georgia, serif);
  --cc-font-display: var(--font-display, 'Bodoni Moda', serif);
  --cc-font-label: var(--font-mono, 'Courier Prime', monospace);
}

/* Zertifikatsrahmen wie .certificate-frame der Seite */
.cc-banner, .cc-dialog {
  border: 1.5px solid var(--ink, #211A14);
  box-shadow:
    inset 0 0 0 5px var(--parchment, #F1E7D0),
    inset 0 0 0 6px var(--gold, #B8974E),
    inset 0 0 0 7px var(--parchment, #F1E7D0),
    inset 0 0 0 8px var(--ink, #211A14),
    0 18px 40px -14px rgba(33, 26, 20, .45);
}
.cc-banner { padding: 1.6rem 1.75rem 1.2rem; }
.cc-dialog { padding: 2.1rem 2rem 1.75rem; color: var(--ink, #211A14); }
.cc-dialog::backdrop { background: rgba(33, 26, 20, .6); }

.cc-title { font-weight: 700; font-size: 1.3rem; }
.cc-text { font-size: 1.05rem; line-height: 1.5; }
.cc-text a { color: var(--verdigris, #007A3D); }
.cc-link { font-family: var(--cc-font-label); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.cc-cat-desc { font-size: 1rem; }
.cc-x { color: var(--ink-soft, #4A3F33); }

/* gestanzte Stempel-Schaltflächen, gleiche Form und Grösse für Ablehnen und Zustimmen */
.cc-btn {
  border: 0;
  padding: .7rem 1rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  transition: background .25s ease;
}
.cc-btn--accept { background: var(--seal, #8C2318); color: var(--parchment, #F1E7D0); box-shadow: inset 0 0 0 3px var(--seal-deep, #6E1B12); }
.cc-btn--reject { background: var(--ink, #211A14); color: var(--parchment, #F1E7D0); box-shadow: inset 0 0 0 3px #35281c; }
.cc-btn--save   { background: transparent; color: var(--ink, #211A14); box-shadow: inset 0 0 0 1.5px var(--ink, #211A14); }
.cc-btn { white-space: nowrap; }
.cc-actions--3 .cc-btn { padding-inline: .5rem; font-size: .68rem; letter-spacing: .05em; }
@media (max-width: 640px) {
  .cc-btn { padding-inline: .5rem; font-size: .68rem; letter-spacing: .05em; }
}
.cc-btn:hover { filter: none; }
.cc-btn--accept:hover { background: var(--seal-deep, #6E1B12); }
.cc-btn--reject:hover { background: #150f0a; }
.cc-btn--save:hover { background: color-mix(in srgb, var(--ink, #211A14) 7%, transparent); }

/* Schalter in Siegelrot, ruhend in Tinte */
.cc-slider { background: var(--ink, #211A14); opacity: .28; }
.cc-slider::before { background: var(--parchment, #F1E7D0); }
.cc-switch input:checked + .cc-slider { background: var(--verdigris, #007A3D); opacity: 1; }
.cc-switch input:checked + .cc-slider::before { background: var(--parchment, #F1E7D0); }
.cc-switch input:disabled + .cc-slider { background: var(--ink-soft, #4A3F33); opacity: .5; }

.cc-media { border: 1px dashed var(--gold, #B8974E); background: var(--parchment-deep, #E8DAB9); }
.cc-media p { font-size: 1.05rem; }

/* Chatbot sitzt unten rechts; auf Mobile kommt die Karte darüber, danach ist der Weg frei. */
@media (max-width: 640px) {
  .cc-banner { padding: 1.35rem 1.4rem 1rem; }
}