/* Kursbibliothek 2.0 — Richtungen statt Lektionen. All selectors hc2-* so the block can drop into any page.
   Patterns: rows = directions (Apple TV shelves) · anchor chips (MasterClass) · marquee only when the strip is long
   enough (dance-masterclass) · pause button (Fitness+, WCAG 2.2.2) · format label (Domestika) · dashed planned tiles. */

.hc2{
  --hc2-bg:#05070F; --hc2-card:#0E1326;
  --hc2-gold:#B87C1A; --hc2-gold-hi:#D9A94E;
  --hc2-t2:#B4BCD3; --hc2-t3:#7581A6;
  --hc2-line:rgba(255,255,255,.08);
  --hc2-pad:clamp(20px,4.4vw,64px);
  position:relative;color:#fff;font-family:'Outfit',sans-serif;
  background:radial-gradient(70% 34% at 85% 0%,rgba(184,124,26,.10),transparent 70%),var(--hc2-bg);
  padding:clamp(56px,6.5vw,104px) 0;
}

/* ── head ── */
.hc2-head{padding:0 var(--hc2-pad);display:flex;align-items:flex-end;justify-content:space-between;gap:28px 40px;flex-wrap:wrap;margin-bottom:26px}
.hc2-head-txt{max-width:640px}
.hc2-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--hc2-gold);margin-bottom:14px}
.hc2-head h2{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(28px,3.2vw,44px);line-height:1.04;letter-spacing:-.025em;margin:0}
.hc2-head h2 em{font-style:normal;color:var(--hc2-gold-hi)}
.hc2-head p{margin:14px 0 0;color:var(--hc2-t2);font-size:clamp(15px,1.25vw,17px);line-height:1.6}
.hc2-head-side{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.hc2-stats{display:flex;border:1px solid var(--hc2-line);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.02)}
.hc2-stats div{padding:14px 22px;text-align:center}
.hc2-stats div+div{border-left:1px solid var(--hc2-line)}
.hc2-stats b{display:block;font-weight:700;font-size:28px;line-height:1;color:#fff}
.hc2-stats span{display:block;margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--hc2-t3)}
.hc2-pause{display:inline-flex;align-items:center;gap:9px;font:600 13px/1 'Outfit',sans-serif;color:var(--hc2-t2);background:none;
  border:1px solid var(--hc2-line);border-radius:999px;padding:8px 14px 8px 11px;cursor:pointer;transition:color .2s,border-color .2s}
.hc2-pause:hover{color:#fff;border-color:rgba(255,255,255,.22)}
.hc2-pause-i{width:10px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.hc2-pause[aria-pressed="true"] .hc2-pause-i{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}

/* ── chips (anchors) ── */
.hc2-chips{position:sticky;top:88px;z-index:30;display:flex;gap:8px;padding:12px var(--hc2-pad);margin-bottom:clamp(22px,2.6vw,34px);
  overflow-x:auto;scrollbar-width:none;background:linear-gradient(180deg,rgba(5,7,15,.94),rgba(5,7,15,.82));backdrop-filter:blur(10px)}
.hc2-chips::-webkit-scrollbar{display:none}
.hc2-chip{flex:none;font:600 14px/1 'Outfit',sans-serif;color:var(--hc2-t2);white-space:nowrap;text-decoration:none;
  background:#0D1226;border:1px solid var(--hc2-line);border-radius:999px;padding:11px 16px;transition:color .2s,border-color .2s,background .2s}
.hc2-chip:hover{color:#fff;border-color:rgba(255,255,255,.22)}
.hc2-chip.is-active{color:#fff;border-color:var(--hc2-gold-hi);background:rgba(184,124,26,.14)}
.hc2-chip:focus-visible{outline:2px solid var(--hc2-gold-hi);outline-offset:3px}

/* ── row ── */
.hc2-row{position:relative;margin-bottom:clamp(36px,3.8vw,56px);scroll-margin-top:150px}
.hc2-rhead{display:flex;align-items:baseline;gap:14px;padding:0 var(--hc2-pad);margin-bottom:16px;flex-wrap:wrap}
.hc2-rtitle{font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(19px,1.6vw,24px);margin:0;color:#fff}
.hc2-rnote{font-size:13.5px;color:var(--hc2-t3)}
.hc2-rrule{flex:1 1 60px;height:1px;align-self:center;background:linear-gradient(90deg,rgba(184,124,26,.35),transparent 80%)}
.hc2-rlink{font-size:14px;font-weight:600;color:var(--hc2-gold-hi);text-decoration:none}
.hc2-rlink:hover{color:#fff}

.hc2-vp{position:relative}
.hc2-track{display:flex;gap:16px;padding:4px var(--hc2-pad) 8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--hc2-pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hc2-track::-webkit-scrollbar{display:none}
.hc2-card,.hc2-tile{scroll-snap-align:start}

/* marquee rows (JS adds .is-marquee only when the unique strip is ≥ 1.25 × viewport) */
.hc2-row.is-marquee .hc2-vp{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent)}
.hc2-row.is-marquee .hc2-track{overflow:visible;width:max-content;padding-left:0;padding-right:0;scroll-snap-type:none;will-change:transform;cursor:grab}
.hc2-row.is-dragging .hc2-track{cursor:grabbing}
.hc2-row.is-dragging .hc2-card{pointer-events:none}

.hc2-arrow{position:absolute;top:calc(50% + 20px);transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:none;align-items:center;justify-content:center;font-size:20px;line-height:1;color:#fff;
  background:rgba(5,7,15,.72);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .25s,background .2s,border-color .2s}
.hc2-arrow:hover{background:var(--hc2-gold);border-color:var(--hc2-gold)}
.hc2-arrow.prev{left:max(10px,calc(var(--hc2-pad) - 23px))}
.hc2-arrow.next{right:max(10px,calc(var(--hc2-pad) - 23px))}
@media (hover:hover) and (min-width:901px){
  .hc2-row.is-marquee .hc2-arrow,.hc2-row.has-overflow .hc2-arrow{display:flex}
  .hc2-row:hover .hc2-arrow{opacity:1}
}

/* ── card ── */
.hc2-card{flex:0 0 auto;width:clamp(262px,21.5vw,340px);display:block;color:inherit;text-decoration:none;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.hc2-media{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--hc2-card);
  border:1px solid rgba(255,255,255,.07);box-shadow:0 10px 26px rgba(0,0,0,.35);transition:border-color .3s,box-shadow .3s}
.hc2-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,1,.36,1);-webkit-user-drag:none;user-select:none}
.hc2-badge{position:absolute;bottom:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 9px;border-radius:6px;background:rgba(5,7,15,.8);border:1px solid rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(6px)}
.hc2-badge--gold{background:var(--hc2-gold);border-color:var(--hc2-gold)}
.hc2-badge--free{background:#1F8A4C;border-color:#1F8A4C}
.hc2-badge--prod::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hc2-gold-hi);box-shadow:0 0 0 0 rgba(217,169,78,.6);animation:hc2-pulse 2.2s ease-out infinite}
@keyframes hc2-pulse{0%{box-shadow:0 0 0 0 rgba(217,169,78,.55)}70%{box-shadow:0 0 0 7px rgba(217,169,78,0)}100%{box-shadow:0 0 0 0 rgba(217,169,78,0)}}
.hc2-cap{position:relative;padding:12px 2px 0}
.hc2-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hc2-t3);margin-bottom:5px}
.hc2-name{font-size:15.5px;font-weight:600;line-height:1.3;color:#fff}
.hc2-meta{margin-top:5px;display:flex;flex-wrap:wrap;gap:3px 8px;align-items:baseline;font-size:13px;color:var(--hc2-t3)}
.hc2-price{font-weight:700;color:var(--hc2-gold-hi);font-size:14px}
.hc2-vat{font-size:11px;color:var(--hc2-t3);margin-left:-3px}
.hc2-price--free{color:#5FD08F}
.hc2-price--soon{color:var(--hc2-t2);font-weight:600}
.hc2-go{position:absolute;right:2px;top:12px;font-size:12.5px;font-weight:600;color:var(--hc2-gold-hi);opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s}
.hc2-card.is-soon .hc2-media img{filter:saturate(.8) brightness(.8)}

@media (hover:hover) and (pointer:fine){
  a.hc2-card:hover{transform:translateY(-4px)}
  a.hc2-card:hover .hc2-media{border-color:rgba(217,169,78,.6);box-shadow:0 20px 46px rgba(0,0,0,.55)}
  a.hc2-card:hover .hc2-media img{transform:scale(1.045)}
  a.hc2-card:hover .hc2-go{opacity:1;transform:none}
}
a.hc2-card:focus-visible{outline:none}
a.hc2-card:focus-visible .hc2-media{border-color:var(--hc2-gold-hi);box-shadow:0 0 0 3px rgba(217,169,78,.45)}
a.hc2-card:focus-visible .hc2-go{opacity:1;transform:none}

/* planned tile inside a row (Muay Thai) */
.hc2-tile{flex:0 0 auto;width:clamp(200px,15vw,240px);aspect-ratio:16/11;align-self:flex-start;border-radius:12px;border:1px dashed rgba(255,255,255,.18);
  background:linear-gradient(135deg,#0B1230,#06081A);padding:16px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.hc2-tile b{font-weight:700;font-size:15px;line-height:1.2}
.hc2-tile small{font-size:12px;color:var(--hc2-t3)}

/* ── billboard (one course in a direction → full width, Apple TV hero shelf) ── */
.hc2-billboard{position:relative;margin:0 var(--hc2-pad);aspect-ratio:21/7;min-height:260px;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08);display:flex;align-items:center}
.hc2-bb-bg{position:absolute;inset:0;background:url(img/covers/billboard-bg.webp) center 58%/cover;transform:scale(1.02)}
.hc2-bb-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#05070F 0%,rgba(5,7,15,.9) 34%,rgba(5,7,15,.35) 70%,rgba(5,7,15,.6) 100%)}
.hc2-bb-txt{position:relative;z-index:2;padding:clamp(24px,3.4vw,52px);max-width:560px}
.hc2-bb-txt .hc2-badge{position:static;margin-bottom:16px}
.hc2-bb-kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--hc2-gold-hi)}
.hc2-bb-txt h4{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(34px,4.4vw,64px);line-height:1;letter-spacing:-.02em;margin:10px 0 0;color:#fff;text-transform:uppercase}
.hc2-bb-txt p{margin:14px 0 0;color:var(--hc2-t2);font-size:clamp(14px,1.2vw,16px);line-height:1.6}

/* ── planned directions ── */
.hc2-plan{list-style:none;margin:0;padding:0 var(--hc2-pad);display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hc2-ptile{min-height:112px;border-radius:12px;border:1px dashed rgba(255,255,255,.16);background:linear-gradient(135deg,#0B1230,#06081A);
  padding:16px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.hc2-ptile b{font-family:'Syne',sans-serif;font-weight:800;font-size:15px;line-height:1.15;color:#fff}
.hc2-ptile small{font-size:12px;color:var(--hc2-t3);line-height:1.4}
.hc2-foot{padding:6px var(--hc2-pad) 0;margin:0;font-size:12.5px;color:var(--hc2-t3)}

@media (max-width:1080px){ .hc2-plan{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){
  .hc2-head-side{align-items:stretch;width:100%}
  .hc2-stats{width:100%}.hc2-stats div{flex:1;padding:12px 10px}.hc2-stats b{font-size:24px}
  .hc2-chips{top:88px}
  .hc2-billboard{aspect-ratio:4/5;min-height:0;align-items:flex-end}
  .hc2-bb-bg{background-position:30% 60%}
  .hc2-bb-bg::after{background:linear-gradient(0deg,#05070F 8%,rgba(5,7,15,.75) 52%,rgba(5,7,15,.2) 100%)}
}
@media (max-width:700px){
  .hc2-card{width:78vw;max-width:320px}
  .hc2-tile{width:62vw;max-width:240px}
  .hc2-rrule{display:none}
  .hc2-rtitle{flex:1 0 100%}
  .hc2-plan{grid-template-columns:1fr 1fr;gap:10px}
  .hc2-ptile{min-height:96px;padding:13px}
}
@media (prefers-reduced-motion:reduce){
  .hc2-card,.hc2-media img,.hc2-go{transition:none}
  .hc2-badge--prod::before{animation:none}
}

/* ── fixes after first visual pass (14.09) ── */
.hc2-pause[hidden]{display:none}
.hc2-head h2,.hc2-rtitle,.hc2-ptile b,.hc2-bb-txt h4{hyphens:manual;-webkit-hyphens:manual;word-break:normal;overflow-wrap:normal}
.hc2-billboard{aspect-ratio:21/6;min-height:240px}
.hc2-bb-bg{background-position:center 64%;transform:none}
.hc2-bb-bg::after{background:linear-gradient(90deg,#05070F 0%,rgba(5,7,15,.86) 30%,rgba(5,7,15,.15) 62%,rgba(5,7,15,.35) 100%)}
.hc2-ptile b{font-size:14px}
@media (max-width:700px){
  .hc2-head h2{font-size:30px}
  .hc2-ptile b{font-family:'Outfit',sans-serif;font-weight:700;font-size:15px}
  .hc2-billboard{aspect-ratio:auto;min-height:340px}
}