/* easychild — Cookie-Consent-Tool. Strikt vom Seiten-CSS getrennt: alles unter .ecc-*, eigener
   Reset, eigene --ecc-* Variablen (mit Brand-Hexwerten geseedet → robust unabhängig von der
   Bundle-Ladereihenfolge). Warme, gerundete „Gruß-Karte" im easychild-Look, die sanft hereinwippt. */

.ecc-root {
  --ecc-red: #DE1A66;
  --ecc-red-deep: #C2185B;
  --ecc-lila: #667EEA;
  --ecc-ink: #374151;
  --ecc-ink-soft: #5b6472;
  --ecc-line: #efe6e9;
  --ecc-cream: #FFF7F1;
  --ecc-r: 1.1rem;
  --ecc-r-lg: 1.6rem;
  --ecc-shadow: 0 24px 60px -20px rgba(222, 26, 102, .28), 0 8px 24px -12px rgba(55, 65, 81, .18);
  --ecc-font: 'Quicksand', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none; /* nur Karte/Scrim fangen Klicks */
  font-family: var(--ecc-font);
  color: var(--ecc-ink);
}
.ecc-root * { box-sizing: border-box; }

/* Modaler Zustand (Einstellungen): Scrim einblenden, Hintergrund sperren. Intro-Layer = kein Scrim. */
.ecc-root::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(40, 26, 33, .42);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.ecc-root.is-modal::before { opacity: 1; pointer-events: auto; }

/* ---- Karte ---------------------------------------------------------------------------- */
.ecc-card {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  width: min(30rem, calc(100vw - 2.5rem));
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  pointer-events: auto;
  background: #fff;
  border-radius: var(--ecc-r-lg);
  box-shadow: var(--ecc-shadow);
  padding: 1.4rem 1.4rem 1.25rem;
  transform: translateY(140%);
  opacity: 0;
  transition: transform .42s cubic-bezier(.22, 1.2, .36, 1), opacity .3s ease;
}
.ecc-root.is-open .ecc-card { transform: translateY(0); opacity: 1; }
.ecc-root.is-closing .ecc-card { transform: translateY(140%); opacity: 0; }

/* Einstellungen werden mittig zentriert dargestellt (echtes Modal). */
.ecc-root.is-modal .ecc-card {
  left: 50%;
  bottom: auto;
  top: 50%;
  transform: translate(-50%, -50%) scale(.98);
  width: min(34rem, calc(100vw - 2rem));
}
.ecc-root.is-modal.is-open .ecc-card { transform: translate(-50%, -50%) scale(1); }
.ecc-root.is-modal.is-closing .ecc-card { transform: translate(-50%, -50%) scale(.98); opacity: 0; }

/* ---- Kopf / Text ---------------------------------------------------------------------- */
.ecc-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.ecc-mark {
  font-size: 1.5rem; line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(222, 26, 102, .25));
  animation: ecc-wave 2.6s ease-in-out 1;
  transform-origin: 70% 80%;
}
.ecc-title { margin: 0; font-size: 1.22rem; font-weight: 700; color: var(--ecc-ink); letter-spacing: -.01em; }
.ecc-close {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(55, 65, 81, .06); color: var(--ecc-ink-soft);
  transition: background-color .16s ease, color .16s ease;
}
.ecc-close:hover { background: rgba(222, 26, 102, .1); color: var(--ecc-red); }
.ecc-body { margin: 0 0 .7rem; font-size: .98rem; line-height: 1.5; color: var(--ecc-ink-soft); }
/* Spezifität (0,3,0) schlägt die Seiten-Regel `.ec-page a:not([class*="ec-btn"])` (0,2,1),
   sonst erbt der Link die Ink-Farbe statt der Brand-Lila. */
.ecc-root .ecc-card .ecc-link {
  display: inline-block; margin-bottom: 1rem;
  color: var(--ecc-lila); font-weight: 700; font-size: .92rem; text-decoration: none;
  border-bottom: 2px solid transparent;
}
.ecc-root .ecc-card .ecc-link:hover { color: var(--ecc-lila); border-bottom-color: currentColor; }

/* ---- Buttons -------------------------------------------------------------------------- */
.ecc-actions { display: flex; gap: .6rem; }
.ecc-btn {
  flex: 1 1 0;
  min-height: 2.95rem;
  padding: .8rem 1rem;
  border-radius: 999px;
  border: 0;
  font-family: var(--ecc-font);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
/* „Alles erlauben" und „Nur Notwendige" sind GLEICH GROSS/GLEICHWERTIG (Anf. 2). Die Lenkung zur
   Zustimmung läuft nur über positive Gestaltung (Brand-Primärfarbe + dezentes Glow), nicht über
   Entwertung der Ablehnung. */
.ecc-btn--accept {
  background: var(--ecc-red);
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(222, 26, 102, .65);
  animation: ecc-invite 3.4s ease-in-out infinite;
}
.ecc-btn--accept:hover { background: var(--ecc-red-deep); transform: translateY(-2px); }
.ecc-btn--ghost {
  background: #fff;
  color: var(--ecc-ink);
  box-shadow: inset 0 0 0 2px rgba(55, 65, 81, .18);
  animation: none;
}
.ecc-btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--ecc-lila); color: var(--ecc-lila); transform: translateY(-2px); }

.ecc-textbtn {
  display: block; width: 100%;
  margin-top: .7rem; padding: .35rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--ecc-font); font-weight: 600; font-size: .9rem;
  color: var(--ecc-ink-soft); text-decoration: underline; text-underline-offset: 3px;
}
.ecc-textbtn:hover { color: var(--ecc-ink); }

/* ---- Einstellungen: Kategorien -------------------------------------------------------- */
.ecc-cats { margin: .2rem 0 1.1rem; display: grid; gap: .7rem; }
.ecc-cat { padding: .85rem .95rem; border: 1px solid var(--ecc-line); border-radius: var(--ecc-r); background: var(--ecc-cream); }
.ecc-cat__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ecc-cat__name { font-weight: 700; font-size: 1.02rem; }
.ecc-cat__desc { margin: .35rem 0 0; font-size: .88rem; line-height: 1.45; color: var(--ecc-ink-soft); }
.ecc-pill {
  flex: none; padding: .25rem .6rem; border-radius: 999px;
  background: rgba(102, 126, 234, .14); color: var(--ecc-lila);
  font-size: .76rem; font-weight: 700;
}

/* Schalter */
.ecc-switch { position: relative; flex: none; width: 3.1rem; height: 1.75rem; cursor: pointer; }
.ecc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ecc-switch__slider {
  position: absolute; inset: 0; border-radius: 999px;
  background: #d7d2cf; transition: background-color .2s ease;
}
.ecc-switch__slider::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.ecc-switch input:checked + .ecc-switch__slider { background: var(--ecc-red); }
.ecc-switch input:checked + .ecc-switch__slider::after { transform: translateX(1.35rem); }

/* Dienste-Liste je Kategorie */
.ecc-svcs { list-style: none; margin: .65rem 0 0; padding: 0; display: grid; gap: .5rem; }
.ecc-svc { padding-left: .8rem; border-left: 2px solid rgba(102, 126, 234, .35); }
.ecc-svc__name { display: block; font-weight: 600; font-size: .86rem; }
.ecc-svc__meta { display: block; font-size: .78rem; color: var(--ecc-ink-soft); line-height: 1.35; }
.ecc-svc__note { display: block; margin-top: .15rem; font-size: .74rem; color: var(--ecc-lila); font-weight: 600; }

/* ---- „Danke" Mikro-Moment ------------------------------------------------------------- */
.ecc-thanks {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: inherit;
  font-size: 1.3rem; font-weight: 700; color: var(--ecc-red);
  animation: ecc-pop .35s ease;
}

/* ---- Fokus / A11y --------------------------------------------------------------------- */
.ecc-root button:focus-visible,
.ecc-root a:focus-visible,
.ecc-switch input:focus-visible + .ecc-switch__slider {
  outline: 3px solid var(--ecc-lila);
  outline-offset: 2px;
}

/* ---- Animationen ---------------------------------------------------------------------- */
@keyframes ecc-wave { 0%,60%,100% { transform: rotate(0); } 70% { transform: rotate(14deg); } 80% { transform: rotate(-8deg); } 90% { transform: rotate(10deg); } }
@keyframes ecc-invite { 0%,100% { box-shadow: 0 14px 30px -12px rgba(222, 26, 102, .65); } 50% { box-shadow: 0 14px 34px -10px rgba(222, 26, 102, .9); } }
@keyframes ecc-pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ecc-card { transition: opacity .2s ease; transform: none !important; }
  .ecc-root.is-open .ecc-card { opacity: 1; }
  .ecc-root.is-closing .ecc-card { opacity: 0; }
  .ecc-mark, .ecc-btn--accept { animation: none; }
  .ecc-switch__slider::after { transition: none; }
}

/* ---- Klein / Mobile ------------------------------------------------------------------- */
@media (max-width: 520px) {
  .ecc-card {
    left: .6rem; right: .6rem; bottom: .6rem;
    width: auto;
    padding: 1.2rem 1.15rem 1.1rem;
  }
  .ecc-root.is-modal .ecc-card { left: 50%; right: auto; top: 50%; bottom: auto; width: calc(100vw - 1.2rem); }
  .ecc-actions { flex-direction: column; }
  .ecc-btn { width: 100%; }
}