/* ── Quellenberg Bestattungen · DSGVO Cookie-Banner ──────────────────
   An das Kundendesign angelehnt: weiße Karte im .card-Stil, grüner
   Primär-Button wie die übrigen CTAs, dezenter Gold-Akzent, Icon-Badge
   und Eyebrow-Label analog zu den .icon-cards.
   Nutzt die CSS-Variablen des Projekts (mit Fallback-Werten).

   Mobile: feste left/width über 100vw (kein left:50% + translateX),
   Höhe über svh/dvh – JS gleicht ggf. den Visual Viewport nach. */

.cookie-banner{
  --cc-gap: 16px;
  position:fixed;
  left:var(--cc-gap);
  right:var(--cc-gap);
  bottom:var(--cc-gap);
  z-index:9999;
  box-sizing:border-box;
  width:auto;
  max-width:720px;
  margin-inline:auto;
  max-height:calc(100vh - (var(--cc-gap) * 2));
  max-height:calc(100dvh - (var(--cc-gap) * 2));
  max-height:calc(100svh - (var(--cc-gap) * 2));
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background:var(--bg,#FFFFFF);
  color:var(--ink,#1A1A1A);
  border:1px solid var(--line,#E5E5E0);
  border-top:3px solid var(--accent,#B89559);
  border-radius:var(--radius-l,20px);
  box-shadow:0 6px 18px rgba(20,30,25,.10),0 24px 56px rgba(20,30,25,.16);
  padding:26px 28px;
  font-family:var(--font,'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(24px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
}

.cookie-banner.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

/* Kopfbereich: Icon-Badge + Eyebrow + Titel */
.cookie-banner__head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}

.cookie-banner__icon{
  flex-shrink:0;
  width:46px;
  height:46px;
  border-radius:14px;
  background:var(--primary-l,#E8EEEA);
  color:var(--primary,#3D5A4C);
  display:grid;
  place-items:center;
}
.cookie-banner__icon svg{width:24px;height:24px}

.cookie-banner__eyebrow{
  display:block;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11.5px;
  font-weight:600;
  color:var(--primary,#3D5A4C);
  margin-bottom:2px;
}

.cookie-banner__title{
  margin:0;
  font-size:20px;
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.2;
  color:var(--ink,#1A1A1A);
}

.cookie-banner__text{
  margin:0 0 20px;
  font-size:14.5px;
  line-height:1.65;
  color:var(--ink-2,#5C6660);
}

.cookie-banner__text a{
  color:var(--primary,#3D5A4C);
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:2px;
}
.cookie-banner__text a:hover{color:var(--primary-d,#2A4034)}

.cookie-banner__actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  flex-wrap:wrap;
  position:sticky;
  bottom:0;
  background:var(--bg,#FFFFFF);
  padding-top:4px;
}

/* Buttons exakt im Stil der Projekt-.btn (Pill-Form) */
.cookie-banner__btn{
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  font-family:inherit;
  font-weight:500;
  font-size:15px;
  line-height:1;
  padding:14px 24px;
  border-radius:999px;
  border:1px solid transparent;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.cookie-banner__btn:hover{transform:translateY(-1px)}

.cookie-banner__btn:focus-visible{
  outline:2px solid var(--primary,#3D5A4C);
  outline-offset:3px;
}

/* Sekundär „Nur notwendige“ – Ghost-Stil, gleichwertig, kein Dark Pattern */
.cookie-banner__btn--secondary{
  background:transparent;
  color:var(--ink,#1A1A1A);
  border-color:var(--line,#E5E5E0);
}
.cookie-banner__btn--secondary:hover{background:var(--surface,#FAFAF7)}

/* Primär „Alle akzeptieren“ – grün wie alle CTAs der Website */
.cookie-banner__btn--primary{
  background:var(--primary,#3D5A4C);
  color:#fff;
}
.cookie-banner__btn--primary:hover{
  background:var(--primary-d,#2A4034);
  box-shadow:0 8px 20px rgba(61,90,76,.35);
}

/* Mobile: kompakter, Buttons untereinander, im sichtbaren Bereich halten */
@media (max-width:560px){
  .cookie-banner{
    --cc-gap: 12px;
    left:var(--cc-gap);
    right:auto;
    width:calc(100vw - (var(--cc-gap) * 2));
    max-width:calc(100vw - (var(--cc-gap) * 2));
    margin-inline:0;
    bottom:max(12px, env(safe-area-inset-bottom, 0px));
    max-height:calc(100vh - 24px - env(safe-area-inset-bottom, 0px));
    max-height:calc(100dvh - 24px - env(safe-area-inset-bottom, 0px));
    max-height:calc(100svh - 24px - env(safe-area-inset-bottom, 0px));
    border-radius:18px;
    padding:18px 16px 16px;
    transform:translateY(16px);
  }
  .cookie-banner.is-visible{transform:translateY(0)}
  .cookie-banner__head{
    gap:12px;
    margin-bottom:10px;
  }
  .cookie-banner__icon{
    width:40px;
    height:40px;
    border-radius:12px;
  }
  .cookie-banner__icon svg{width:20px;height:20px}
  .cookie-banner__title{font-size:17px}
  .cookie-banner__text{
    margin:0 0 14px;
    font-size:13.5px;
    line-height:1.55;
  }
  .cookie-banner__actions{
    flex-direction:column;
    gap:8px;
  }
  .cookie-banner__btn{
    width:100%;
    padding:14px 20px;
    font-size:14.5px;
  }
}

/* Banner beim Drucken ausblenden */
@media print{
  .cookie-banner{display:none !important}
}

@media (prefers-reduced-motion:reduce){
  .cookie-banner,
  .cookie-banner.is-visible{transition:opacity .01ms linear}
}