/* =========================================================================
   Elementa Lodges – Cookie-Consent-Banner (DSGVO, echte Wahlmöglichkeit)
   Eigenständig gehalten (hardcodierte Marken-Hex), damit es sowohl im
   Light-DOM (Ratgeber/Legal-Seiten) als auch neben dem Shadow-DOM
   (Startseite & Unterkunftsseiten) identisch aussieht.
   ========================================================================= */
:root{
  --ec-charcoal:#16130d; --ec-charcoal-2:#1e1a11; --ec-charcoal-3:#0c0a06;
  --ec-gold:#cba258; --ec-gold-bright:#ecd29a; --ec-gold-deep:#a47e34;
  --ec-gold-grad:linear-gradient(135deg,#f0dcae,#cba258 50%,#a47e34);
  --ec-cream:#f4eee0; --ec-mute:#c7c1b2; --ec-mute-2:#8f897b;
  --ec-line:rgba(244,238,224,.14); --ec-line-gold:rgba(203,162,88,.42);
  --ec-ease:cubic-bezier(.22,.61,.36,1);
}

.ec-cc,.ec-cc *{box-sizing:border-box}
.ec-cc{
  position:fixed;left:0;right:0;bottom:0;z-index:400;
  display:flex;justify-content:center;
  padding:clamp(.7rem,2vw,1.4rem);
  font-family:'Mulish','Calibri',system-ui,-apple-system,'Segoe UI',sans-serif;
  pointer-events:none;
}
.ec-cc[hidden]{display:none}

/* Einblend-Animation nach der Ladeanimation */
.ec-cc__panel{
  pointer-events:auto;width:min(880px,100%);
  background:linear-gradient(160deg,rgba(30,26,17,.98),rgba(12,10,6,.98));
  border:1px solid var(--ec-line-gold);
  border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(244,238,224,.06);
  backdrop-filter:blur(14px) saturate(1.1);
  padding:clamp(1.25rem,2.6vw,1.9rem);
  color:var(--ec-cream);
  transform:translateY(22px);opacity:0;
  transition:transform .6s var(--ec-ease),opacity .6s var(--ec-ease);
}
.ec-cc.ec-in .ec-cc__panel{transform:none;opacity:1}

.ec-cc__head{display:flex;align-items:center;gap:.7rem;margin:0 0 .7rem}
.ec-cc__badge{
  width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--ec-gold-grad);color:#241a08;
}
.ec-cc__badge svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.7;fill:none}
.ec-cc__title{margin:0;font-family:'Fraunces','Palatino',Georgia,serif;
  font-weight:500;font-size:clamp(1.15rem,2.4vw,1.4rem);color:#fff;letter-spacing:.01em}
.ec-cc__text{margin:0 0 1.1rem;font-size:.9rem;line-height:1.6;color:var(--ec-mute);max-width:70ch}
.ec-cc__text a{color:var(--ec-gold-bright);text-decoration:underline;text-underline-offset:2px}
.ec-cc__text a:hover{color:#fff}

/* Detail-Kategorien (aufklappbar) */
.ec-cc__cats{display:grid;gap:.6rem;margin:0 0 1.15rem;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .5s var(--ec-ease),opacity .4s var(--ec-ease),margin .4s var(--ec-ease)}
.ec-cc.ec-open .ec-cc__cats{max-height:520px;opacity:1}
.ec-cat{
  display:grid;grid-template-columns:1fr auto;align-items:start;gap:.6rem 1rem;
  padding:.85rem 1.05rem;border:1px solid var(--ec-line);border-radius:13px;
  background:rgba(244,238,224,.03);
}
.ec-cat__name{margin:0;font-weight:700;font-size:.9rem;color:#fff;display:flex;align-items:center;gap:.5rem}
.ec-cat__req{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ec-gold-deep);background:rgba(203,162,88,.14);border:1px solid var(--ec-line-gold);
  border-radius:99px;padding:.15em .6em}
.ec-cat__desc{grid-column:1/-1;margin:.15rem 0 0;font-size:.8rem;line-height:1.55;color:var(--ec-mute-2)}

/* Toggle-Schalter */
.ec-sw{position:relative;width:46px;height:26px;flex:none;align-self:center}
.ec-sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ec-sw__track{position:absolute;inset:0;border-radius:99px;background:rgba(244,238,224,.16);
  border:1px solid var(--ec-line);transition:background .3s var(--ec-ease)}
.ec-sw__track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--ec-cream);transition:transform .3s var(--ec-ease),background .3s}
.ec-sw input:checked+.ec-sw__track{background:var(--ec-gold-grad);border-color:transparent}
.ec-sw input:checked+.ec-sw__track::after{transform:translateX(20px);background:#241a08}
.ec-sw input:focus-visible+.ec-sw__track{outline:2px solid var(--ec-gold-bright);outline-offset:2px}
.ec-sw input:disabled{cursor:not-allowed}
.ec-sw input:disabled+.ec-sw__track{opacity:.85}

/* Buttons */
.ec-cc__actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.ec-btn{
  appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:.9rem;
  border-radius:99px;padding:.72em 1.5em;border:1px solid transparent;
  display:inline-flex;align-items:center;gap:.5rem;line-height:1;
  transition:transform .3s var(--ec-ease),background .3s,color .3s,border-color .3s,box-shadow .3s;
}
.ec-btn:hover{transform:translateY(-2px)}
.ec-btn--gold{background:var(--ec-gold-grad);color:#241a08;box-shadow:0 8px 24px rgba(203,162,88,.28)}
.ec-btn--gold:hover{box-shadow:0 12px 30px rgba(203,162,88,.38)}
.ec-btn--ghost{background:transparent;color:var(--ec-cream);border-color:var(--ec-line-gold)}
.ec-btn--ghost:hover{background:rgba(244,238,224,.06);border-color:var(--ec-gold-bright)}
.ec-btn--text{background:transparent;color:var(--ec-mute);border:0;padding:.72em .4em;
  text-decoration:underline;text-underline-offset:3px}
.ec-btn--text:hover{color:#fff;transform:none}
.ec-cc__actions .ec-spacer{flex:1 1 auto}

@media(max-width:640px){
  .ec-cc__actions{gap:.55rem}
  .ec-btn{flex:1 1 auto;justify-content:center}
  .ec-cc__actions .ec-spacer{display:none}
  .ec-btn--text{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){
  .ec-cc__panel,.ec-btn,.ec-cc__cats,.ec-sw__track::after{transition:none}
  .ec-cc__panel{transform:none}
}