/* ideaDIGITAL Cookie und IP – Frontend v2.9.0
   Design-Standard: Petersen & Christ (Navy #192947, Petrol #3F899C,
   Limette #E1EA4E, Text #2F354D, Linien #D9E1E8, Eckradius 5, Nunito). Alle Werte
   kommen aus CSS-Variablen und sind im Dashboard bzw. per Preset anpassbar. */

:root{
  --lw-icb-primary:#3F899C;
  --lw-icb-accent:#192947;
  --lw-icb-text:#2F354D;
  --lw-icb-bg:#ffffff;
  --lw-icb-radius:5px;
  --lw-icb-border-width:1px;
  --lw-icb-banner-border-width:1px;
  --lw-icb-manage-radius:8px;

  /* Hover/Active (optional) */
  --lw-icb-accept-hover-bg:var(--lw-icb-accept-bg);
  --lw-icb-accept-hover-text:var(--lw-icb-accept-text);
  --lw-icb-accept-hover-border:var(--lw-icb-accept-border);
  --lw-icb-accept-active-bg:var(--lw-icb-accept-bg);
  --lw-icb-accept-active-text:var(--lw-icb-accept-text);
  --lw-icb-accept-active-border:var(--lw-icb-accept-border);

  --lw-icb-reject-hover-bg:var(--lw-icb-reject-bg);
  --lw-icb-reject-hover-text:var(--lw-icb-reject-text);
  --lw-icb-reject-hover-border:var(--lw-icb-reject-border);
  --lw-icb-reject-active-bg:var(--lw-icb-reject-bg);
  --lw-icb-reject-active-text:var(--lw-icb-reject-text);
  --lw-icb-reject-active-border:var(--lw-icb-reject-border);

  --lw-icb-necessary-hover-bg:var(--lw-icb-necessary-bg);
  --lw-icb-necessary-hover-text:var(--lw-icb-necessary-text);
  --lw-icb-necessary-hover-border:var(--lw-icb-necessary-border);

  /* Per element */
  --lw-icb-banner-bg:var(--lw-icb-bg);
  --lw-icb-banner-text:var(--lw-icb-text);
  --lw-icb-banner-border:#D9E1E8;

  --lw-icb-accept-bg:var(--lw-icb-primary);
  --lw-icb-accept-text:#ffffff;
  --lw-icb-accept-border:var(--lw-icb-primary);

  --lw-icb-reject-bg:transparent;
  --lw-icb-reject-text:var(--lw-icb-accent);
  --lw-icb-reject-border:var(--lw-icb-accent);

  --lw-icb-necessary-bg:transparent;
  --lw-icb-necessary-text:var(--lw-icb-accent);
  --lw-icb-necessary-border:var(--lw-icb-accent);

  --lw-icb-manage-bg:#ffffff;
  --lw-icb-manage-icon:var(--lw-icb-primary);
  --lw-icb-manage-border:var(--lw-icb-manage-icon);
}

#lw-icb-banner.lw-icb-banner[hidden],
#lw-icb-manage.lw-icb-manage[hidden],
#lw-icb-toast.lw-icb-toast[hidden]{
  display:none !important;
}

.lw-icb-banner{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:999999;
  background:var(--lw-icb-banner-bg) !important;
  color:var(--lw-icb-banner-text) !important;
  border-top:var(--lw-icb-banner-border-width) solid var(--lw-icb-banner-border) !important;
  box-shadow:0 -14px 34px -22px rgba(0, 101, 61, .28);
  /* iPhone-Home-Indicator nicht überdecken (Fix v2.7.0) */
  padding-bottom:env(safe-area-inset-bottom, 0px);
}

.lw-icb-inner{
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
  padding:18px clamp(16px, 4vw, 72px);
  max-width:1320px;   /* Seitenbreite der Website */
  margin:0 auto;
}

.lw-icb-text{
  flex:1 1 auto;
  font-size:var(--lw-icb-text-font-size, var(--lw-icb-font-size, 16px));
  font-family:var(--lw-icb-text-font-family, var(--lw-icb-font-family, inherit));
  font-weight:300;
  line-height:1.6;
}

.lw-icb-text a{
  color:var(--lw-icb-primary) !important;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:2px;
}
.lw-icb-text a:hover{
  color:var(--lw-icb-accent) !important;
  background:transparent !important;
}

.lw-icb-actions{
  flex:0 0 auto;
  display:flex;
  gap:12px;
  align-items:center;
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */

.lw-icb-btn{
  appearance:none;
  border:var(--lw-icb-border-width) solid var(--lw-icb-reject-border) !important;
  border-radius:var(--lw-icb-radius) !important;
  padding:12px 22px;
  min-height:46px;
  font-size:var(--lw-icb-btn-font-size, var(--lw-icb-font-size, 15px));
  font-family:var(--lw-icb-btn-font-family, var(--lw-icb-font-family, inherit));
  font-weight:500;
  line-height:1;
  cursor:pointer;
  background:var(--lw-icb-reject-bg) !important;
  color:var(--lw-icb-reject-text) !important;
  min-width:120px;
  text-align:center;
  text-transform:none;
  letter-spacing:normal;
  box-shadow:none;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.lw-icb-btn:active{
  transform:translateY(1px);
}

.lw-icb-btn:focus-visible,
.lw-icb-manage:focus-visible{
  outline:3px solid #E1EA4E !important;
  outline-offset:3px;
}

.lw-icb-btn.lw-icb-accept{
  background:var(--lw-icb-accept-bg) !important;
  border-color:var(--lw-icb-accept-border) !important;
  color:var(--lw-icb-accept-text) !important;
}

.lw-icb-btn.lw-icb-reject{
  background:var(--lw-icb-reject-bg) !important;
  border-color:var(--lw-icb-reject-border) !important;
  color:var(--lw-icb-reject-text) !important;
}

.lw-icb-btn.lw-icb-necessary{
  background:var(--lw-icb-necessary-bg, transparent) !important;
  border-color:var(--lw-icb-necessary-border, #192947) !important;
  color:var(--lw-icb-necessary-text, #192947) !important;
}

/* Hover/Active gelten auf ALLEN Breiten.
   (Fix v2.7.0: Diese Regeln standen zuvor komplett innerhalb der Desktop-
   Media-Query – auf Mobilgeräten gab es dadurch kein Hover-/Active-Feedback.) */
.lw-icb-btn.lw-icb-accept:hover{
  background:var(--lw-icb-accept-hover-bg) !important;
  border-color:var(--lw-icb-accept-hover-border) !important;
  color:var(--lw-icb-accept-hover-text) !important;
}
.lw-icb-btn.lw-icb-accept:active{
  background:var(--lw-icb-accept-active-bg) !important;
  border-color:var(--lw-icb-accept-active-border) !important;
  color:var(--lw-icb-accept-active-text) !important;
}
.lw-icb-btn.lw-icb-reject:hover{
  background:var(--lw-icb-reject-hover-bg) !important;
  border-color:var(--lw-icb-reject-hover-border) !important;
  color:var(--lw-icb-reject-hover-text) !important;
}
.lw-icb-btn.lw-icb-reject:active{
  background:var(--lw-icb-reject-active-bg) !important;
  border-color:var(--lw-icb-reject-active-border) !important;
  color:var(--lw-icb-reject-active-text) !important;
}
.lw-icb-btn.lw-icb-necessary:hover{
  background:var(--lw-icb-necessary-hover-bg) !important;
  border-color:var(--lw-icb-necessary-hover-border) !important;
  color:var(--lw-icb-necessary-hover-text) !important;
}

/* Mobile: stack content and stretch actions */
@media (max-width: 767px){
  .lw-icb-inner{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    padding:16px;
  }

  .lw-icb-actions{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
  }

  .lw-icb-btn{
    min-width:140px;
    flex:1 1 auto;
  }
}

/* ─── Manage button (icon only) ───────────────────────────────────────────── */

.lw-icb-manage{
  position:fixed;
  z-index:1000000;
  width:var(--lw-icb-manage-size, 48px);
  height:var(--lw-icb-manage-size, 48px);
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Eckradius folgt der Einstellung (Designsprache: 0 = eckig) */
  border-radius:var(--lw-icb-manage-radius, 0px) !important;
  border:var(--lw-icb-border-width) solid var(--lw-icb-manage-border) !important;
  background:var(--lw-icb-manage-bg) !important;
  color:var(--lw-icb-manage-icon) !important;
  cursor:pointer;
  box-shadow:0 10px 26px -14px rgba(0, 101, 61, .35);
  transition:background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}

.lw-icb-manage:hover{
  background:var(--lw-icb-manage-hover-bg, var(--lw-icb-manage-bg)) !important;
  color:var(--lw-icb-manage-hover-icon, var(--lw-icb-manage-icon)) !important;
  border-color:var(--lw-icb-manage-hover-border, var(--lw-icb-manage-border)) !important;
  transform:translateY(-2px);
}
.lw-icb-manage:active{
  transform:translateY(0);
}

/* Icon skaliert mit dem Button */
.lw-icb-manage .lw-icb-icon svg{
  width:calc(var(--lw-icb-manage-size, 48px) * 0.42);
  height:calc(var(--lw-icb-manage-size, 48px) * 0.42);
}

/* Positionsklassen */
.lw-icb-manage--bottom-right{
  right:var(--lw-icb-manage-offset-x, 16px);
  bottom:calc(var(--lw-icb-manage-offset-y, 16px) + env(safe-area-inset-bottom, 0px));
}
.lw-icb-manage--bottom-left{
  left:var(--lw-icb-manage-offset-x, 16px);
  bottom:calc(var(--lw-icb-manage-offset-y, 16px) + env(safe-area-inset-bottom, 0px));
}
.lw-icb-manage--top-right{
  right:var(--lw-icb-manage-offset-x, 16px);
  top:var(--lw-icb-manage-offset-y, 16px);
}
.lw-icb-manage--top-left{
  left:var(--lw-icb-manage-offset-x, 16px);
  top:var(--lw-icb-manage-offset-y, 16px);
}

/* Responsive: Mobil-Größe */
@media (max-width: 767px){
  .lw-icb-manage{
    width:var(--lw-icb-manage-size-m, 40px);
    height:var(--lw-icb-manage-size-m, 40px);
  }
  .lw-icb-manage .lw-icb-icon svg{
    width:calc(var(--lw-icb-manage-size-m, 40px) * 0.42);
    height:calc(var(--lw-icb-manage-size-m, 40px) * 0.42);
  }
}

.lw-icb-icon{ display:block; }

.lw-icb-sr{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ─── Toast ───────────────────────────────────────────────────────────────── */

.lw-icb-toast{
  position:fixed;
  left:16px;
  right:16px;
  bottom:calc(88px + env(safe-area-inset-bottom, 0px));
  z-index:1000001;
  max-width:520px;
  margin:0 auto;
  padding:13px 16px;
  border-radius:var(--lw-icb-radius) !important;
  background:var(--lw-icb-banner-bg) !important;
  color:var(--lw-icb-text) !important;
  /* Fix v2.7.0: Rahmen war an die Textfarbe gekoppelt (fast schwarz) –
     jetzt feine Markenlinie + grüner Akzentbalken */
  border:1px solid var(--lw-icb-banner-border) !important;
  border-left:4px solid var(--lw-icb-primary) !important;
  box-shadow:0 18px 40px -24px rgba(0, 101, 61, .4);
  font-size:var(--lw-icb-toast-font-size, var(--lw-icb-font-size, 15px));
  font-family:var(--lw-icb-toast-font-family, var(--lw-icb-font-family, inherit));
  font-weight:300;
  line-height:1.5;
}

/* ─── Placeholder for blocked embeds ─────────────────────────────────────── */

.lw-icb-placeholder{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px;
  /* Fix v2.7.0: Rahmen war an die Textfarbe gekoppelt – jetzt Markenlinie */
  border:1px solid var(--lw-icb-banner-border) !important;
  border-radius:var(--lw-icb-radius) !important;
  background:#F6FAF8 !important;
  color:var(--lw-icb-text) !important;
}

.lw-icb-placeholder__text{
  font-size:var(--lw-icb-ph-font-size, var(--lw-icb-font-size, 15px));
  font-family:var(--lw-icb-ph-font-family, var(--lw-icb-font-family, inherit));
  font-weight:300;
  line-height:1.55;
}

.lw-icb-placeholder__btn{
  white-space:nowrap;
}

@media (max-width: 560px){
  .lw-icb-placeholder{
    flex-direction:column;
    align-items:stretch;
    text-align:center;
  }
}

/* ─── Typografie via CSS-Variablen ───────────────────────────────────────── */
.lw-icb-banner,
.lw-icb-placeholder{
  font-size:var(--lw-icb-font-size, 16px);
  font-family:var(--lw-icb-font-family, inherit);
}

/* ─── Banner-Position: oben ──────────────────────────────────────────────── */
.lw-icb-banner--top{
  top:0;
  bottom:auto !important;
  padding-bottom:0;
  border-top:none !important;
  border-bottom:var(--lw-icb-banner-border-width) solid var(--lw-icb-banner-border) !important;
  box-shadow:0 14px 34px -22px rgba(0, 101, 61, .28);
}

/* ─── Banner-Position: Modal ─────────────────────────────────────────────── */
.lw-icb-banner--modal{
  position:fixed !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none;
  padding:0;
  z-index:9999999 !important;
}
.lw-icb-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(2, 26, 16, .55);
}
.lw-icb-modal-box{
  position:relative;
  z-index:1;
  background:var(--lw-icb-banner-bg) !important;
  color:var(--lw-icb-banner-text) !important;
  border:1px solid var(--lw-icb-banner-border) !important;
  border-top:4px solid var(--lw-icb-primary) !important;
  border-radius:var(--lw-icb-radius) !important;
  box-shadow:0 40px 90px -40px rgba(0, 0, 0, .5);
  max-width:560px;
  width:calc(100% - 32px);
  padding:0;
}
.lw-icb-banner--modal .lw-icb-inner{
  flex-direction:column;
  align-items:stretch;
  gap:20px;
  padding:26px;
}
.lw-icb-banner--modal .lw-icb-actions{
  justify-content:flex-end;
  flex-wrap:wrap;
}

/* ─── Animationen ────────────────────────────────────────────────────────── */

/* Slide (Standard) – von unten */
.lw-icb-banner--bottom.lw-icb-banner--anim-slide{
  transform:translateY(100%);
  transition:transform 0.3s ease;
}
.lw-icb-banner--bottom.lw-icb-banner--anim-slide.lw-icb-banner--visible{
  transform:translateY(0);
}

/* Slide – von oben */
.lw-icb-banner--top.lw-icb-banner--anim-slide{
  transform:translateY(-100%);
  transition:transform 0.3s ease;
}
.lw-icb-banner--top.lw-icb-banner--anim-slide.lw-icb-banner--visible{
  transform:translateY(0);
}

/* Fade */
.lw-icb-banner--anim-fade{
  opacity:0;
  transition:opacity 0.3s ease;
}
.lw-icb-banner--anim-fade.lw-icb-banner--visible{
  opacity:1;
}

/* Modal-Fade */
.lw-icb-banner--modal.lw-icb-banner--anim-slide,
.lw-icb-banner--modal.lw-icb-banner--anim-fade{
  opacity:0;
  transition:opacity 0.25s ease;
  transform:none;
}
.lw-icb-banner--modal.lw-icb-banner--anim-slide.lw-icb-banner--visible,
.lw-icb-banner--modal.lw-icb-banner--anim-fade.lw-icb-banner--visible{
  opacity:1;
}

/* Keine Animation */
.lw-icb-banner--anim-none{
  transition:none !important;
}

/* Reduzierte Bewegung respektieren (Fix v2.7.0) */
@media (prefers-reduced-motion: reduce){
  .lw-icb-banner,
  .lw-icb-btn,
  .lw-icb-manage{
    transition:none !important;
  }
  .lw-icb-banner--anim-slide,
  .lw-icb-banner--anim-fade{
    transform:none !important;
    opacity:1;
  }
  .lw-icb-banner--anim-slide:not(.lw-icb-banner--visible),
  .lw-icb-banner--anim-fade:not(.lw-icb-banner--visible){
    opacity:0;
  }
}

/* ─── Dark Mode (opt-in, siehe Einstellung „Dark Mode automatisch“) ──────── */
.lw-icb-dark .lw-icb-banner{
  --lw-icb-banner-bg:#152019;
  --lw-icb-banner-text:#F2F8F5;
  --lw-icb-banner-border:#2E4A3C;
}
.lw-icb-dark .lw-icb-toast{
  background:#152019 !important;
  color:#F2F8F5 !important;
  border-color:#2E4A3C !important;
}
.lw-icb-dark .lw-icb-placeholder{
  background:#152019 !important;
  color:#F2F8F5 !important;
  border-color:#2E4A3C !important;
}
.lw-icb-dark .lw-icb-manage{
  background:#152019 !important;
  color:#7FBFA4 !important;
  border-color:#2E4A3C !important;
}
