/*
 * Hunsrück-Kochtopf – Consent-Modal im Comic-/Küchen-Look des Leadgames.
 * Themt vanilla-cookieconsent 3.1.0 über dessen --cc-* Variablen plus einige
 * strukturelle Regeln (dicke Outline, harter Offset-Schatten, runde Ecken).
 */
:root {
  --cc-font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --cc-bg: #fffaf1;
  --cc-primary-color: #2a2522;
  --cc-secondary-color: #736962;

  --cc-btn-primary-bg: #e85b43;
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-hover-bg: #b93f2d;

  --cc-btn-secondary-bg: #fff;
  --cc-btn-secondary-color: #2a2522;
  --cc-btn-secondary-hover-bg: #f5ead9;
  --cc-btn-secondary-border-color: #2a2522;
  --cc-btn-secondary-hover-border-color: #2a2522;

  /* Ablehnen muss gleichwertig zu Akzeptieren wirken (DSK-Orientierungshilfe
     11/2024): eigene volle Füllfarbe statt ausgegrauter "secondary"-Optik. */
  --cc-btn-necessary-bg: #5e7650;
  --cc-btn-necessary-color: #fff;
  --cc-btn-necessary-hover-bg: #485c3d;

  --cc-toggle-on-bg: #e85b43;
  --cc-cookie-category-block-bg: #f5ead9;
  --cc-cookie-category-block-hover-bg: #efe2cd;
  --cc-separator-border-color: #e4d8c3;
  --cc-footer-border-color: #e4d8c3;
  --cc-overlay-bg: rgba(42, 37, 34, .46);
  --cc-btn-border-radius: 12px;
}

#cc-main {
  font-size: 16px;
}

#cc-main .cm,
#cc-main .pm {
  border: 3px solid #2a2522;
  border-radius: 22px;
  box-shadow: 0 10px 0 rgba(42, 37, 34, .16), 0 26px 64px rgba(42, 37, 34, .30);
}

#cc-main .cm__title,
#cc-main .pm__title {
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: 1.35em;
}

#cc-main .cm__desc,
#cc-main .pm__section-desc {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
}

#cc-main .cm__btn,
#cc-main .pm__btn {
  border: 2px solid #2a2522;
  border-radius: var(--cc-btn-border-radius);
  box-shadow: 0 4px 0 #2a2522;
  font-weight: 900;
  min-height: 2.9rem;
  transition: transform .1s, box-shadow .1s, filter .1s;
}

#cc-main .cm__btn:hover,
#cc-main .pm__btn:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

#cc-main .cm__btn:active,
#cc-main .pm__btn:active {
  transform: translateY(4px);
  box-shadow: none;
}

/* Ablehnen ("Nur Notwendiges") als voll gefüllter Button, gleichwertig sichtbar. */
#cc-main .cm__btn[data-role="necessary"],
#cc-main .pm__btn[data-role="necessary"] {
  background: var(--cc-btn-necessary-bg);
  border-color: #2a2522;
  color: var(--cc-btn-necessary-color);
}

#cc-main .cm__btn[data-role="necessary"]:hover,
#cc-main .cm__btn[data-role="necessary"]:focus-visible,
#cc-main .pm__btn[data-role="necessary"]:hover,
#cc-main .pm__btn[data-role="necessary"]:focus-visible {
  background: var(--cc-btn-necessary-hover-bg);
}

#cc-main .section__toggle:focus-visible,
#cc-main button:focus-visible,
#cc-main a:focus-visible {
  outline: 3px solid rgba(240, 187, 67, .55);
  outline-offset: 3px;
}

#cc-main .pm__section {
  border-radius: 14px;
}

#cc-main .pm__section--toggle .pm__section-title {
  font-weight: 900;
}

#cc-main .pm__section-desc small {
  display: block;
  line-height: 1.55;
  margin-top: .45rem;
}

#cc-main .cm__footer a,
#cc-main .pm__footer a {
  color: #b93f2d;
  font-weight: 800;
}

@media (max-width: 640px) {
  #cc-main .cm { width: calc(100% - 1rem); max-width: none; }
  #cc-main .cm__btn-group { display: grid; grid-template-columns: 1fr; }
}