/* PARTYLY Consent – produktive Gestaltung Variante A (ohne Maskottchen), A1 0421/0422.
   Nur Consent-Klassen (consent-*), kein Einfluss auf PARTYLY-Seitenlayout.
   Externe Datei -> CSP style-src 'self' kompatibel, kein Inline-CSS. */

/* ===== Banner & Karte ===== */
.consent-banner[hidden]{display:none}
.consent-banner{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom));background:rgba(64,42,21,.44)}
.consent-banner.dialog{background:rgba(64,42,21,.55)}
.consent-huelle{position:relative;width:min(470px,100%)}
.consent-karte{width:100%;max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;
  background:#fff;border-radius:26px;padding:34px 32px 24px;text-align:center;color:#3E2A18;
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;line-height:1.55;
  box-shadow:0 30px 70px rgba(64,42,21,.35),0 4px 14px rgba(64,42,21,.12)}
.consent-karte:focus{outline:none}
.consent-karte.einblenden{animation: Karte-a 420ms cubic-bezier(.22,1.2,.36,1)}
@keyframes Karte-a{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}

.consent-karte .kopf h2{font-size:24px;font-weight:800;letter-spacing:-.01em;margin:0 0 12px;color:#3E2A18}
.consent-text p{font-size:15px;color:#6B5644;margin:0 0 10px}
.consent-text p.welle{font-size:15.5px;font-weight:700;color:#3E2A18}
.consent-text .hinweis{font-size:12.5px;color:#A08B76;margin:2px 0 0}

.consent-aktionen{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:18px 0 14px}
.consent-aktionen .btn{flex:1 1 150px;max-width:220px;border-radius:999px;padding:14px 22px;font-size:15.5px;font-weight:700;
  cursor:pointer;font-family:inherit;min-height:48px}
/* Zustimmung: zugaenglicher, warmer PARTYLY-Orange-Ton; #FF6900 bleibt Akzent */
.btn-primaer{background:#C84A00;border:2px solid #C84A00;color:#fff;box-shadow:0 6px 16px rgba(255,105,0,.32);
  transition:transform 140ms ease,box-shadow 140ms ease,background 140ms ease}
.btn-primaer:hover{background:#B84300;border-color:#B84300}
/* Ablehnen: helles Creme, dunkle Schrift, gleichwertig */
.btn-neutrisch{background:#FBF2E4;border:2px solid #E8D9C8;color:#5C4A38;box-shadow:none;
  transition:transform 140ms ease,border-color 140ms ease,background 140ms ease}
.btn-neutrisch:hover{border-color:#D8C3A5;background:#F6EBD8}
/* Hover-Anheben nur auf Geraeten mit echtem Hover */
@media(hover:hover){
  .btn-primaer:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,105,0,.4)}
  .btn-neutrisch:hover{transform:translateY(-2px)}
}
/* kurze Klickanimation */
.consent-aktionen .btn:active{transform:scale(.97);transition-duration:70ms}
.consent-aktionen .btn:focus-visible{outline:3px solid #FF6900;outline-offset:2px}
.btn-neutrisch:focus-visible{outline-color:#B05A00}
@media(prefers-reduced-motion:reduce){
  .consent-aktionen .btn,.btn-primaer,.btn-neutrisch{transition:none}
  .consent-aktionen .btn:active{transform:none}
}
@media(prefers-reduced-motion:reduce) and (hover:hover){
  .btn-primaer:hover,.btn-neutrisch:hover{transform:none}
}

.consent-karte .meta{font-size:12.5px;color:#A08B76;margin:0 0 6px}
.meta-link{font-size:12.5px;color:#B05A00;background:none;border:none;text-decoration:underline;cursor:pointer;font-family:inherit}
.meta-link:focus-visible{outline:2px solid #FF6900;outline-offset:2px;border-radius:4px}
.datenschutz-kurz{margin:10px 0 4px;padding:12px 14px;border-radius:12px;background:#FFF7EE;text-align:left;color:#6B5644;font-size:12px}
.datenschutz-kurz p{margin:0;font-size:12px}
.datenschutz-kurz p+p{margin-top:8px}

/* dezente Konfetti-Ecken neben der Karte */
.consent-banner .konfetti{position:absolute;pointer-events:none;z-index:2}
.consent-banner .konfetti.k1{top:88px;left:-10px;transform:rotate(-14deg)}
.consent-banner .konfetti.k2{top:132px;right:-12px;transform:rotate(18deg)}
@media(max-width:400px){.consent-banner .konfetti{display:none}}
@media(max-width:360px){
  .consent-karte{padding:28px 20px 20px}
  .consent-karte .kopf h2{font-size:21px}
  .consent-aktionen .btn{flex:1 1 100%;max-width:none}
}
@media(prefers-reduced-motion:reduce){.consent-karte.einblenden{animation:none}}

/* optionaler Footer-Status-Text (vom Consent-Script befuellt, wenn Element vorhanden) */
.consent-status{font-size:12px;color:#8A7563}