/* erstellt von LWO Digital GmbH */
/* =====================================================================
   LWO Digital GmbH — Consent-Banner (Einwilligung)
   Dezente, kompakte Karte im LEWO-Stil: unten rechts ueber dem Henrik-
   Launcher (gleicher Glas-Look + Sage-Kante), damit nach dem Wegklicken
   direkt Henrik sichtbar wird. Kein dunkler Vollbild-Vorhang.
   Selektoren unter .cc-wrap gescopet. Keine Google-Fonts (Inter Tight/Inter
   vom Host). Gehoert zu js/consent.js. Gilt fuer lewo.de UND check.lewodigital.de.
   ===================================================================== */
.cc-wrap{
  --cc-ink:#1C1B18; --cc-off:#F5F3EF; --cc-sage:#AEC4BC; --cc-deep:#5E7F73;
  --cc-fh:"Inter Tight",Arial,sans-serif; --cc-fb:"Inter",Arial,sans-serif;
  position:fixed; inset:0; z-index:99999; display:none; pointer-events:none;
}
.cc-wrap.on{ display:block; }

/* Scrim: standardmaessig unsichtbar/durchklickbar (Banner ist dezent, kein Tor).
   Nur im Einstellungen-Modus ein Hauch Tint, damit Klick-ausserhalb schliesst. */
.cc-wrap .cc-scrim{
  position:absolute; inset:0; background:transparent; opacity:0;
  transition:opacity .35s ease; pointer-events:none;
}
.cc-wrap.on:not(.banner-only) .cc-scrim{
  background:rgba(10,12,11,.18); opacity:1; pointer-events:auto;
}

/* Kompakte Karte, unten rechts, ueber dem Henrik-Launcher */
.cc-wrap .cc{
  position:absolute; left:0; right:0; margin-inline:auto; bottom:clamp(16px,2.5vw,24px);
  width:min(360px,calc(100vw - 24px)); max-height:calc(100vh - 130px); overflow-y:auto;
  pointer-events:auto; opacity:0; transform:translateY(16px);
  border-radius:18px; padding:18px 20px 16px;
  background:rgba(245,243,239,.92);
  -webkit-backdrop-filter:blur(20px) saturate(1.1); backdrop-filter:blur(20px) saturate(1.1);
  box-shadow:inset 0 0 0 1px rgba(94,127,115,.28), 0 22px 54px -22px rgba(28,27,24,.42);
  color:var(--cc-ink); font-family:var(--cc-fb);
  transition:opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.cc-wrap.on .cc{ opacity:1; transform:translateY(0); }

.cc-wrap .cc h2{
  font-family:var(--cc-fh); font-weight:700; font-size:15px; letter-spacing:-.01em;
  margin:0 0 6px; display:flex; align-items:center; gap:8px;
}
/* dezenter Sage-Punkt vor der Ueberschrift (LEWO-Signatur) */
.cc-wrap .cc h2::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--cc-deep); box-shadow:0 0 0 3px rgba(94,127,115,.16);
}
.cc-wrap .cc p{ font-size:13px; line-height:1.5; color:rgba(28,27,24,.66); margin:0 0 14px; }
.cc-wrap .cc p a{ color:var(--cc-deep); text-underline-offset:2px; }

.cc-wrap .cc-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
/* Beide Hauptknoepfe optisch gleichwertig — Pflicht, kein Dark Pattern */
.cc-wrap .cc-btn{
  flex:1 1 0; min-width:118px; padding:11px 14px; border-radius:11px; cursor:pointer;
  font-family:var(--cc-fb); font-size:13.5px; font-weight:600;
  border:1.5px solid var(--cc-ink); background:transparent; color:var(--cc-ink);
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.cc-wrap .cc-btn:hover{ transform:translateY(-1px); }
.cc-wrap .cc-btn.primary{ background:var(--cc-ink); color:var(--cc-off); }
.cc-wrap .cc-btn.primary:hover{ background:var(--cc-deep); border-color:var(--cc-deep); }
.cc-wrap .cc-btn.ghost:hover{ background:rgba(28,27,24,.05); }
.cc-wrap .cc-link{
  flex:1 1 100%; order:3; margin-top:2px; text-align:center;
  background:none; border:0; cursor:pointer; font-family:var(--cc-fb);
  font-size:12.5px; font-weight:500; color:rgba(28,27,24,.5); text-decoration:underline;
  text-underline-offset:2px; padding:4px 2px;
}
.cc-wrap .cc-link:hover{ color:var(--cc-ink); }
.cc-wrap .cc-btn:focus-visible,
.cc-wrap .cc-link:focus-visible,
.cc-wrap .sw:focus-visible{ outline:2px solid var(--cc-deep); outline-offset:2px; }

/* ============ EINSTELLUNGEN (klappt in der Karte auf) ============ */
.cc-wrap .cc-detail{ display:none; margin-top:2px; }
.cc-wrap .cc.open .cc-detail{ display:block; }
.cc-wrap .cc.open .cc-short{ display:none; }
.cc-wrap .cat{ display:flex; gap:12px; align-items:flex-start; padding:13px 0; border-top:1px solid rgba(28,27,24,.09); }
.cc-wrap .cat h3{ font-family:var(--cc-fh); font-weight:700; font-size:14px; margin:0 0 3px; }
.cc-wrap .cat p{ font-size:12.5px; line-height:1.5; margin:0; color:rgba(28,27,24,.58); }
.cc-wrap .cat .txt{ flex:1; }
.cc-wrap .sw{
  position:relative; flex:0 0 auto; width:42px; height:24px; border-radius:100px;
  background:rgba(28,27,24,.16); cursor:pointer; transition:background .25s; border:0; margin-top:2px;
}
.cc-wrap .sw::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.22); transition:transform .25s;
}
.cc-wrap .sw[aria-checked="true"]{ background:var(--cc-deep); }
.cc-wrap .sw[aria-checked="true"]::after{ transform:translateX(18px); }
.cc-wrap .sw[disabled]{ opacity:.5; cursor:not-allowed; }
.cc-wrap .cat .fix{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cc-deep);
  font-weight:600; margin-top:5px; display:block;
}

@media (prefers-reduced-motion:reduce){
  .cc-wrap .cc, .cc-wrap .cc-scrim, .cc-wrap .cc-btn, .cc-wrap .sw, .cc-wrap .sw::after{ transition:none; }
}
/* Schmale Screens: naeher an den Rand */
@media (max-width:420px){
  .cc-wrap .cc{ bottom:12px; }
}