/* =====================================================================
   CONSENT-KARTE – Mobile-Game-Stil: dicke Kontur, 3D-Unterkante.
   Schriften kommen aus dem Haupt-CSS (Lilita One / Fredoka).
   ===================================================================== */
.hc-karte {
  --hc-kontur: #3a1d0b;
  --hc-panel: #fff8e8;
  --hc-text: #3a1d0b;
  --hc-knopf: #ffc93c;
  --hc-titel-schrift: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --hc-text-schrift: "Fredoka", "Nunito", "Segoe UI", system-ui, sans-serif;

  position: fixed;
  z-index: 9000;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(440px, calc(100% - 20px));
  box-sizing: border-box;
  transform: translate(-50%, 24px);
  opacity: 0;
  padding: 16px 16px 12px;
  background: var(--hc-panel);
  color: var(--hc-text);
  border: 4px solid var(--hc-kontur);
  border-radius: 22px;
  box-shadow: 0 6px 0 var(--hc-kontur), 0 14px 30px rgba(58, 29, 11, .35);
  font-family: var(--hc-text-schrift);
  transition: transform .28s cubic-bezier(.2, 1.4, .4, 1), opacity .2s ease;
}
.hc-karte.hc-sichtbar { transform: translate(-50%, 0); opacity: 1; }

.hc-titel {
  margin: 0 0 6px;
  font-family: var(--hc-titel-schrift);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: .01em;
}
.hc-text { margin: 0 0 10px; font-size: .86rem; line-height: 1.35; }

/* Zwei gleichwertige Buttons: gleiche Größe, Farbe, Gewichtung */
.hc-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hc-knopf {
  min-height: 48px;
  padding: 8px 6px;
  font-family: var(--hc-titel-schrift);
  font-size: 1rem;
  line-height: 1.1;
  color: var(--hc-kontur);
  background: var(--hc-knopf);
  border: 3px solid var(--hc-kontur);
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--hc-kontur);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.hc-knopf:hover { filter: brightness(1.05); }
.hc-knopf:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--hc-kontur); }
.hc-knopf:focus-visible,
.hc-links a:focus-visible { outline: 3px solid #1c6cd8; outline-offset: 3px; }
.hc-knopf[aria-pressed="true"]::after { content: " ✓"; }

.hc-links { margin: 12px 0 0; text-align: center; font-size: .85rem; }
.hc-links a { color: var(--hc-kontur); font-weight: 600; }
.hc-links span { margin: 0 6px; }

@media (max-width: 360px) {
  .hc-karte { padding: 12px 12px 10px; border-width: 3px; }
  .hc-titel { font-size: 1.15rem; }
  .hc-text { font-size: .85rem; }
  .hc-knopf { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-karte, .hc-knopf { transition: none; }
  .hc-karte { transform: translate(-50%, 0); }
  .hc-knopf:active { transform: none; }
}