/* ================================================================
   [hdkd_highlights] — panel-card peek carousel (cards only;
   heading/eyebrow handled in Uncode). Theme fonts (inherit, DSGVO).
   Colours forced with !important + panel-scoped specificity so the
   theme can't override the white-on-coloured-panel text.
   ================================================================ */
.hdkd-hl{ --hl-teal:#1C8D82; --hl-ink:#2A2520; --hl-muted:#6b6256; --hl-line:#e7e3dc;
  color:var(--hl-ink); max-width:none; margin:0; width:100%; }

.hdkd-hl__viewport{ overflow:hidden; border-radius:24px; }
.hdkd-hl__track{ display:flex; gap:24px; transition:transform .6s cubic-bezier(.5,.05,.2,1); will-change:transform; }

.hdkd-hl__card{ flex:0 0 calc(100% - clamp(130px, 17vw, 280px)); min-width:calc(100% - clamp(130px, 17vw, 280px));
  display:grid; grid-template-columns:1fr 1.06fr; border-radius:24px; overflow:hidden; background:#fff;
  box-shadow:0 24px 60px rgba(20,18,15,.10); }
.hdkd-hl__media{ position:relative; min-height:500px; background:#e9e5de; }
.hdkd-hl__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.hdkd-hl__panel{ background:var(--accent,#1C8D82); padding:clamp(34px,3.6vw,60px);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  text-align:left !important; }
.hdkd-hl__panel > *{ text-align:left !important; }

/* text — panel-scoped + !important to beat theme heading/link colours */
.hdkd-hl__panel .hdkd-hl__ey{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.82) !important; margin:0 0 16px; }
.hdkd-hl__panel .hdkd-hl__t{ font-family:inherit !important; font-weight:500 !important;
  font-size:clamp(23px,2.3vw,28px) !important; line-height:1.12 !important; letter-spacing:-.015em !important;
  margin:0 !important; padding:0 !important; color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.10); }
.hdkd-hl__panel .hdkd-hl__sub{ font-size:clamp(15px,1.5vw,18px); font-style:italic;
  color:rgba(255,255,255,.9) !important; margin:10px 0 0; }
.hdkd-hl__panel .hdkd-hl__desc{ font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.92) !important;
  margin:18px 0 0; max-width:50ch; }
.hdkd-hl__rule{ height:1px; background:rgba(255,255,255,.26); margin:26px 0 22px; }

/* stats — Datum + Uhrzeit on one row, Veranstalter on its own (as prototyped) */
.hdkd-hl__stats{ display:flex; flex-wrap:wrap; gap:24px 64px; }
.hdkd-hl__stat b{ display:block; font-family:inherit; font-weight:600; font-size:clamp(16px,1.7vw,21px);
  line-height:1.1; color:#fff !important; }
.hdkd-hl__stat span{ display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.74) !important; margin-top:7px; }
.hdkd-hl__stat--wide{ flex-basis:100%; }

/* CTAs */
.hdkd-hl__cta{ display:flex; align-items:center; gap:22px; margin-top:30px; flex-wrap:wrap; }
.hdkd-hl__btn{ font-size:15px; font-weight:500; border-radius:999px; padding:13px 26px; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; transition:.18s; }
.hdkd-hl__panel .hdkd-hl__btn--p{ background:#fff !important; color:var(--hl-ink) !important; border:1px solid #fff; }
.hdkd-hl__btn--p:hover{ transform:translateY(-1px); }
.hdkd-hl__panel .hdkd-hl__btn--s{ background:transparent; color:#fff !important; border:1px solid rgba(255,255,255,.55); }
.hdkd-hl__btn--s:hover{ transform:translateY(-1px); border-color:#fff; }
.hdkd-hl__panel .hdkd-hl__more{ color:#fff !important; font-size:15px; font-weight:500; text-decoration:underline;
  text-underline-offset:4px; text-decoration-thickness:1px; }
.hdkd-hl__panel .hdkd-hl__more:hover{ text-decoration-thickness:2px; }

/* controls */
.hdkd-hl__ctrl{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; }
.hdkd-hl__dots{ display:flex; gap:9px; }
.hdkd-hl__dots button{ height:7px; width:7px; border-radius:99px; background:#cfc7ba; border:0; cursor:pointer; padding:0; transition:.25s; }
.hdkd-hl__dots button.on{ width:26px; background:var(--hl-ink); }
.hdkd-hl__nav{ display:flex; align-items:center; gap:10px; }
.hdkd-hl__lbl{ font-size:12.5px; color:var(--hl-muted); }
.hdkd-hl__arw{ width:44px; height:44px; border-radius:50%; border:1px solid var(--hl-line); background:#fff;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--hl-ink); transition:.18s; }
.hdkd-hl__arw:hover{ border-color:var(--hl-teal); color:var(--hl-teal); }
.hdkd-hl__arw svg{ width:18px; height:18px; }

/* controls="light" — for placements on a coloured / dark section background */
.hdkd-hl[data-controls="light"] .hdkd-hl__dots button{ background:rgba(255,255,255,.45); }
.hdkd-hl[data-controls="light"] .hdkd-hl__dots button.on{ background:#fff; }
.hdkd-hl[data-controls="light"] .hdkd-hl__lbl{ color:rgba(255,255,255,.9); }
.hdkd-hl[data-controls="light"] .hdkd-hl__arw{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.hdkd-hl[data-controls="light"] .hdkd-hl__arw:hover{ background:rgba(255,255,255,.16); border-color:#fff; color:#fff; }

@media (max-width:820px){
  .hdkd-hl__card{ grid-template-columns:1fr; flex:0 0 calc(100% - 40px); min-width:calc(100% - 40px); }
  .hdkd-hl__media{ min-height:240px; }
}

/* Phone — the stacked card was still full-height + the eyebrow (date · full
   category) wrapped to 3 lines. Tighten the vertical rhythm, shrink the eyebrow
   (smaller + less tracking so it packs) and drop the heading a notch. */
@media (max-width:560px){
  .hdkd-hl__viewport{ border-radius:18px; }
  .hdkd-hl__card{ border-radius:18px; }
  .hdkd-hl__media{ min-height:200px; }
  .hdkd-hl__panel{ padding:22px 20px; }
  .hdkd-hl__panel .hdkd-hl__ey{ font-size:10.5px; letter-spacing:.09em; margin:0 0 9px; }
  .hdkd-hl__panel .hdkd-hl__t{ font-size:20px !important; line-height:1.14 !important; }
  .hdkd-hl__panel .hdkd-hl__sub{ font-size:14px; margin-top:8px; }
  .hdkd-hl__panel .hdkd-hl__desc{ font-size:14px; margin-top:12px; }
  .hdkd-hl__rule{ margin:16px 0 14px; }
  .hdkd-hl__stats{ gap:12px 36px; }
  .hdkd-hl__stat b{ font-size:16px; }
  .hdkd-hl__cta{ margin-top:18px; gap:12px; }
  .hdkd-hl__btn{ font-size:14px; padding:11px 22px; }
}