/**
 * E-LOU Cookie Consent – schwebende Karte unten links, seriös und kompakt.
 * Nutzt die grünen Marken-Töne von E-LOU (#98f867 mit dunkler Schrift).
 * Zwei Ansichten: Kurzinfo -> Detail-Einstellungen mit Toggle-Switches.
 */
:root{
  --elouc-radius: 16px;
  --elouc-primary: #98f867;
  --elouc-primary-dark: #7fe648;
  --elouc-ink: #14200c;
  --elouc-text: #1c2023;
  --elouc-text-muted: #6b7378;
  --elouc-border: #ecedee;
}

.elou-cookie-banner{
  position: fixed; left: 24px; bottom: 24px; z-index: 99999;
  max-width: 400px; width: calc(100% - 48px);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  animation: elouc-in .4s cubic-bezier(.2,.8,.2,1);
}
.elou-cookie-banner[hidden]{ display:none; }

@keyframes elouc-in{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}

.elou-cookie-banner__card{
  background:#fff; color: var(--elouc-text);
  border-radius: var(--elouc-radius);
  box-shadow: 0 20px 50px rgba(17,21,23,.22), 0 2px 8px rgba(17,21,23,.08);
  padding: 26px 26px 22px;
  border: 1px solid var(--elouc-border);
}

.elou-cookie-banner__brand{
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-weight: 800; font-size: 1rem; letter-spacing: -.02em;
  color: var(--elouc-ink); margin-bottom: 14px;
}
.elou-cookie-banner__brand span{ color: var(--elouc-primary-dark); }

.elou-cookie-banner__view h2{
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 1.05rem; font-weight:700; margin: 0 0 8px; color: var(--elouc-text); letter-spacing:-.01em;
}
.elou-cookie-banner__view p{
  font-size: .87rem; line-height:1.55; color: var(--elouc-text-muted); margin: 0 0 18px;
}

.elou-cookie-banner__actions{ display:flex; flex-direction:column; gap: 10px; }

.elou-btn{
  text-align:center; width:100%;
  border-radius: 9px; padding: 12px 14px; font-size:.87rem; font-weight:700;
  border: 1.5px solid transparent; cursor:pointer; transition: all .18s ease; font-family: inherit;
  white-space: nowrap;
}
.elou-btn--primary{ background: var(--elouc-primary); color: var(--elouc-ink); }
.elou-btn--primary:hover{ background: var(--elouc-primary-dark); }
.elou-btn--outline{ background:#fff; border-color: var(--elouc-border); color: var(--elouc-text); font-weight:600; }
.elou-btn--outline:hover{ background: #f6f7f8; }
.elou-btn--ghost{ background:transparent; color: var(--elouc-text-muted); border-color: var(--elouc-border); font-weight:600; }
.elou-btn--ghost:hover{ background:#f6f7f8; color: var(--elouc-text); }

.elou-cookie-banner__legal-link{
  display:block; text-align:center; margin-top: 14px; font-size:.76rem;
  color: var(--elouc-text-muted); text-decoration: underline; text-underline-offset: 2px;
}
.elou-cookie-banner__legal-link:hover{ color: var(--elouc-text); }

/* Detail-Ansicht */
.elou-cookie-banner__back{
  display:inline-flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer;
  color: var(--elouc-text-muted); font-size:.8rem; font-weight:600; padding:0; margin-bottom: 12px; font-family: inherit;
}
.elou-cookie-banner__back:hover{ color: var(--elouc-text); }

.elou-cookie-banner__categories{ display:flex; flex-direction:column; gap: 14px; margin-bottom: 18px; max-height: 260px; overflow-y:auto; }
.elou-cookie-cat{ padding: 12px 0; border-bottom: 1px solid var(--elouc-border); }
.elou-cookie-cat:last-child{ border-bottom:none; padding-bottom:0; }
.elou-cookie-cat__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 5px; }
.elou-cookie-cat__label{ font-size:.88rem; font-weight:600; color: var(--elouc-text); }
.elou-cookie-cat p{ margin:0; font-size:.78rem; line-height:1.5; color: var(--elouc-text-muted); }

/* Toggle-Switch */
.elou-switch{ position:relative; display:inline-block; width: 38px; height: 22px; flex-shrink:0; }
.elou-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.elou-switch__track{ position:absolute; inset:0; background: #d8dbdd; border-radius: 999px; transition: background .2s ease; }
.elou-switch__thumb{
  position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s ease;
}
.elou-switch input:checked + .elou-switch__track{ background: var(--elouc-primary-dark); }
.elou-switch input:checked + .elou-switch__track .elou-switch__thumb{ transform: translateX(16px); }
.elou-switch input:disabled + .elou-switch__track{ background:#c4e8ac; cursor:not-allowed; }
.elou-switch input:focus-visible + .elou-switch__track{ outline: 2px solid var(--elouc-primary-dark); outline-offset: 2px; }

@media (max-width: 520px){
  .elou-cookie-banner{ left:12px; right:12px; bottom:12px; width:auto; max-width:none; }
  .elou-cookie-banner__card{ padding: 22px 20px 18px; }
}