/* Fix: overlay positioning needs relative media box */
.htkic2-media-box{position:relative;overflow: visible;}
/* Frontend styles (v1 baseline) */
.htkic2-card{box-sizing:border-box;position:relative;overflow: visible}

/*
  Container-aware responsiveness (v1.2.64)
  The card is often placed inside sections/columns with their own widths.
  We therefore stack left/right media layouts based on the *card container width*
  (not only the browser viewport).
*/
.htkic2-card{
  /* Enable container queries based on the card's *own* width.
     NOTE: Named @container rules require a matching container-name. */
  container-type:inline-size;
  container-name: htkic2card;
}

/* Default stack threshold: 840px (works well with most real-world layouts) */
@container (max-width: 840px){
  .htkic2-card.htkic2-has-media-left .htkic2-inner,
  .htkic2-card.htkic2-has-media-right .htkic2-inner{
    flex-direction:column !important;
  }
  .htkic2-card.htkic2-has-media-left .htkic2-media,
  .htkic2-card.htkic2-has-media-right .htkic2-media{
    order:1 !important;
    /* When stacked (tablet/mobile), media should always span full width.
       Percentage widths are only meaningful in left/right (2-column) layout. */
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
  }

  /* Circle media: when stacked, center the circle even if desktop alignment was left/right */
  .htkic2-card.htkic2-has-media-left .htkic2-media.htkic2-media-circle,
  .htkic2-card.htkic2-has-media-right .htkic2-media.htkic2-media-circle{
    justify-content:center !important;
  }
  .htkic2-card.htkic2-has-media-left .htkic2-content,
  .htkic2-card.htkic2-has-media-right .htkic2-content{
    order:2 !important;
  }
  .htkic2-card.htkic2-has-media-left .htkic2-media-box,
  .htkic2-card.htkic2-has-media-right .htkic2-media-box{
    width:100% !important;
  }
}
/* Ensure the frame (border) is always above media/content */
.htkic2-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 var(--htkic2-bw,0px) var(--htkic2-bc,transparent);
  z-index:3}
.htkic2-inner{display:flex;flex-direction:column;box-sizing:border-box;position:relative;z-index:1}
.htkic2-media-box{position:relative}
.htkic2-card.is-clickable{cursor:pointer}
.htkic2-play{position:absolute;left:12px;bottom:12px;width:44px;height:44px;border-radius:999px;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer}
.htkic2-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:99999}
.htkic2-modal-backdrop.is-open{display:flex}
.htkic2-modal{width:min(900px,92vw);max-height:86vh;overflow:auto;background:#fff;border-radius:12px;padding:16px;position:relative}
.htkic2-modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.htkic2-modal-close{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;position:absolute;top:10px;z-index:5}
.htkic2-modal-body{margin-top:10px}
.htkic2-modal-media{margin:10px 0}
.htkic2-modal-media iframe,.htkic2-modal-media video{width:100%;height:min(60vh,520px);border:0}


/* Accordion (v1) */
.htkic2-acc-item{border-top:1px solid #eee;padding:8px 0}
.htkic2-acc-head{width:100%;text-align:left;border:0;background:transparent;font-weight:600;cursor:pointer;padding:8px 0}
.htkic2-acc-body{padding:6px 0 10px}

/* Inline Details (Accordion/Inline) */
.htkic2-inline-details{max-width:100%;margin:10px 0 18px;padding:14px 16px;border:1px solid #e5e5e5;border-radius:12px;background:#fff}


/* Button positioning (corner inside content) */
.htkic2-card.btnfull .htkic2-btn{display:block;width:100%;}

/* If enabled: button sits bottom-right inside the content area (stable for desktop/tablet/mobile) */
.htkic2-content{
  position:relative;
  /* Default (desktop) */
  --htkic2-btn-right: var(--htkic2-btn-right-d, 16px);
  --htkic2-btn-bottom: var(--htkic2-btn-bottom-d, 16px);
}

/* Frontend breakpoints: use device-specific vars if present */
/* Viewport breakpoints (fallback) */
@media (max-width: 740px){
  .htkic2-content{
    --htkic2-btn-right: var(--htkic2-btn-right-t, var(--htkic2-btn-right-d, 16px));
    --htkic2-btn-bottom: var(--htkic2-btn-bottom-t, var(--htkic2-btn-bottom-d, 16px));
  }
}
@media (max-width: 460px){
  .htkic2-content{
    --htkic2-btn-right: var(--htkic2-btn-right-m, var(--htkic2-btn-right-t, var(--htkic2-btn-right-d, 16px)));
    --htkic2-btn-bottom: var(--htkic2-btn-bottom-m, var(--htkic2-btn-bottom-t, var(--htkic2-btn-bottom-d, 16px)));
  }
}


/* Container breakpoints (recommended): match card container width, not browser width.
   This makes Tablet/Mobile button positions apply correctly even when the browser is wide
   but the card is placed in a narrow column/grid. */
@container (max-width: 840px){
  .htkic2-content{
    --htkic2-btn-right: var(--htkic2-btn-right-t, var(--htkic2-btn-right-d, 16px));
    --htkic2-btn-bottom: var(--htkic2-btn-bottom-t, var(--htkic2-btn-bottom-d, 16px));
  }
}
@container (max-width: 520px){
  .htkic2-content{
    --htkic2-btn-right: var(--htkic2-btn-right-m, var(--htkic2-btn-right-t, var(--htkic2-btn-right-d, 16px)));
    --htkic2-btn-bottom: var(--htkic2-btn-bottom-m, var(--htkic2-btn-bottom-t, var(--htkic2-btn-bottom-d, 16px)));
  }
}

/* Backend preview modes (the preview is not real viewport width, so media queries won't help there) */
.htkic2-pv-desktop .htkic2-content{--htkic2-btn-right:var(--htkic2-btn-right-d,16px);--htkic2-btn-bottom:var(--htkic2-btn-bottom-d,16px)}
.htkic2-pv-tablet  .htkic2-content{--htkic2-btn-right:var(--htkic2-btn-right-t,var(--htkic2-btn-right-d,16px));--htkic2-btn-bottom:var(--htkic2-btn-bottom-t,var(--htkic2-btn-bottom-d,16px))}
.htkic2-pv-mobile  .htkic2-content{--htkic2-btn-right:var(--htkic2-btn-right-m,var(--htkic2-btn-right-t,var(--htkic2-btn-right-d,16px)));--htkic2-btn-bottom:var(--htkic2-btn-bottom-m,var(--htkic2-btn-bottom-t,var(--htkic2-btn-bottom-d,16px)))}
.htkic2-pv-custom  .htkic2-content{--htkic2-btn-right:var(--htkic2-btn-right-d,16px);--htkic2-btn-bottom:var(--htkic2-btn-bottom-d,16px)}
.htkic2-btn.htkic2-btn--corner{
  position:absolute;
  /* User sets px values.
     No clamp() here: with per-device settings the user can choose safe values
     for Desktop/Tablet/Mobile (builder-like behavior). */
  right:var(--htkic2-btn-right-clamped, var(--htkic2-btn-right,16px));
  bottom:var(--htkic2-btn-bottom-clamped, var(--htkic2-btn-bottom,16px));
}

/* If user selects "volle Breite" we ignore right-offset logic and stretch inside the content padding */
.htkic2-card.btnfull .htkic2-btn.htkic2-btn--corner{
  left:16px !important;
  right:16px !important;
  transform:none !important;
  width:auto !important;
  max-width:none !important;
}

/*
  Viewport fallback (Front-end):
  Many users expect that on smaller screens the button simply sits bottom/center.
  This also avoids surprises when cards are inside layouts where container queries
  are not effective (themes/builders may alter containment).
*/
@media (max-width: 900px){
  .htkic2-btn.htkic2-btn--corner{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    bottom:16px !important;
    max-width:calc(100% - 24px);
  }

  .htkic2-card.btnfull .htkic2-btn.htkic2-btn--corner{
    left:12px !important;
    right:12px !important;
  }
}
@media (max-width: 520px){
  .htkic2-btn.htkic2-btn--corner{
    bottom:14px !important;
    max-width:calc(100% - 20px);
    font-size:clamp(14px,4.6vw,18px) !important;
    padding:10px 16px !important;
  }

  .htkic2-card.btnfull .htkic2-btn.htkic2-btn--corner{
    left:10px !important;
    right:10px !important;
  }
}

/* Media overlay (Text auf Bild) */ (Text auf Bild) */
.htkic2-media-overlay{position:absolute;z-index:2;font-size:var(--htkic2-ov-fs,22px);line-height:1.2}
@media (max-width:768px){.htkic2-media-overlay{font-size:var(--htkic2-ov-fs-m,16px)}}


/* Mobile: if media is left/right on desktop, stack and put media on top */
@media (max-width:768px){
  .htkic2-inner{flex-direction:column !important;}
  .htkic2-media{order:1 !important;}
  .htkic2-media{flex:0 0 100% !important;width:100% !important;max-width:100% !important;}
  .htkic2-content{order:2 !important;}
  .htkic2-media-box{width:100% !important;}
}


/* --- Video Lightbox (separate from content modal) --- */
.htkic2-video-trigger{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
}
.htkic2-play-icon{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:56px;
  height:56px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
  pointer-events:none;
}

.htkic2-vlb-backdrop{
  position:fixed;
  inset:0;
  z-index:999999;
  background:rgba(0,0,0,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.htkic2-vlb-box{
  position:relative;
  width:min(980px, 100%);
  max-height:90vh;
  background:#000;
  border-radius:12px;
  overflow: visible;
}
.htkic2-vlb-media{
  width:100%;
  height:auto;
}
.htkic2-vlb-close{
  position:absolute;
  right:10px;
  top:10px;
  z-index:2;
  width:40px;
  height:40px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:28px;
  line-height:40px;
  cursor:pointer;
}
.htkic2-vlb-close:hover{ background:rgba(255,255,255,.28); }


/* Video Lightbox aspect wrapper */
.htkic2-vlb-aspect{width:100%;}


.htkic2-vlb-footer{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:3;
}

/* --- Hinweis-Labels Popover (v1.2.69) --- */
.htkic2-label{position:relative;}
.htkic2-label-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;line-height:1;}
.htkic2-label-ico{display:inline-flex;align-items:center;justify-content:center;min-width:14px;font-weight:700;opacity:.9}
.htkic2-label-popover{display:none;position:absolute;left:0;top:calc(100% + 8px);min-width:220px;max-width:340px;z-index:50;background:#fff;color:#111;border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:10px 12px;box-shadow:0 18px 38px rgba(0,0,0,.22);line-height:1.35;font-size:14px;}
.htkic2-label.is-open .htkic2-label-popover{display:block;}

/* Close button inside popover */
.htkic2-label-close{
  position:absolute;
  top:6px;
  right:6px;
  width:26px;
  height:26px;
  border:0;
  background:transparent;
  color:rgba(0,0,0,.65);
  font-size:18px;
  line-height:26px;
  text-align:center;
  padding:0;
  margin:0;
  cursor:pointer;
  border-radius:8px;
}
.htkic2-label-close:hover{background:rgba(0,0,0,.06);color:rgba(0,0,0,.85);}
.htkic2-label-popover-content{display:block;padding-right:28px;}

/* On narrow containers, keep popover readable and avoid overflow */
@container (max-width: 420px){
  .htkic2-label-popover{max-width:280px;}
}
.htkic2-vlb-open{
  display:inline-block;
  font-size:13px;
  line-height:1.2;
  color:rgba(255,255,255,.88);
  text-decoration:none;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
  padding:6px 10px;
  border-radius:999px;
}
.htkic2-vlb-open:hover{
  color:#fff;
  background:rgba(0,0,0,.5);
}


/* Video lightbox fallback (blocked embeds / video error) */
.htkic2-vlb-fallback{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:14px 14px;
  background:rgba(0,0,0,.75);
  color:rgba(255,255,255,.92);
  font-size:14px;
  line-height:1.35;
  text-align:center;
}
.htkic2-vlb-fallback a{
  color:#fff;
  text-decoration:underline;
}