/* ===== KwK Kursvielfalt Shortcode — CSS v11 (2026-06-16) =====
   v11 (2026-06-16): LEFT-ALIGN on /kursuebersicht/ ONLY (JK). The shortcode is
                    shared by 3 pages (kursuebersicht / kochkurse-events /
                    offene-kurse-events). The inline center styles were removed
                    from the PHP markup (.kwk-container text-align:center +
                    .kwk-section-subtitle margin:0 auto 32px), so a CSS DEFAULT
                    block below replicates the CENTERED look for ALL pages, and a
                    page-scoped override (body.page-id-65085) flips ONLY the
                    course-overview page to a clean shared LEFT edge that lines up
                    with the Hero, the intro header, the filter bar and the grid
                    (all on the 1200px content box, left ~113px @1440 viewport).
                    The other two pages stay perfectly centered. Filter logic
                    (v8.js), grid + popup unchanged. Filename-bumped v10.css ->
                    v11.css (Hummingbird strip); old v10.css deleted on deploy.

   v10 (2026-06-16): ROW-1 SINGLE-LINE ON DESKTOP + polish (JK). The 6-pill
                    taste row 1 wrapped to two ragged lines on desktop because
                    the filter wrap was only 880px. Fixes, combined to fit:
                    (1) filter wrap max-width 880 -> 1080px;
                    (2) pills made a touch more compact (padding 10/18 -> 9/15,
                        font 13.5 -> 13px, gap 8 -> 7px);
                    (3) label column narrower (64 -> 52px) and re-tinted to copper
                        (var(--kwk-gold-light)) instead of washed-out grey.
                    Polish (subtle, dark-copper-V2): copper row labels, smoother
                    pill hover/active transitions, a faint copper active lift,
                    a little more breathing room above the bar + a refined
                    hairline. MOBILE (<=600px): instead of column-wrapping each
                    row now scrolls HORIZONTALLY (overflow-x:auto, scroll-snap,
                    slim/near-invisible scrollbar, edge fade) so both rows stay a
                    single tappable line. Pure CSS — markup, data-attrs and v8.js
                    untouched. Filename-bumped v9.css -> v10.css (Hummingbird strip).

   v9 (2026-06-04): ROW-1 CATEGORY FILTERS. Row 1 grows from 3 to 6 pills
   v1 (2026-05-06): grid + popup, lifted from /kurstermine/.
   prior (2026-05-24): added filter row, label badges, price tag, empty-state.
   v2 (2026-06-02): filter-bar redesign — segmented dark/glass pills, copper
                    filled active state (no cheap glow), grouped (taste pills |
                    divider | price pills) with a leading label, edge-faded
                    horizontal scroll-snap on mobile. Filename-versioned to
                    bypass the Hummingbird ?ver= cache strip (see febas-hosting).
   v3 (2026-06-03): active filter pill — removed colored copper glow box-shadow,
                    now a minimal neutral rgba(0,0,0,.18) lift only. Saisonkurs
                    badge moved off gold/orange onto the copper gradient.
   v4 (2026-06-03): (1) Veggie label split into two distinct visuals —
                    .kwk-klabel-veggie stays FILLED solid green ("Vegetarisch",
                    = the course IS vegetarian); new .kwk-klabel-veggie-option is
                    an OUTLINE chip (dark translucent bg, green border + green
                    text, outline leaf) for "Veggie-Variante möglich" (= an
                    OPTION, not a property). (2) Filter bar now holds 8 pills —
                    it wraps to 2 centred rows on desktop (flex-wrap) and keeps
                    the horizontal scroll on mobile; a "Preis" sub-label leads
                    the price group. Filename-bumped v3->v4.
   v5 (2026-06-03): MULTI-SELECT filter (JS rewrite v4->v5.js). Several pills
                    can now be active at once — the .kwk-kfilter-active copper
                    fill already renders correctly for any number of active
                    pills, so the per-pill colouring is unchanged. The
                    "Alle Kurse" reset pill carries the same active fill and
                    auto-highlights when nothing else is selected. Filename-
                    bumped v4->v5 in lockstep with the JS so the Hummingbird
                    cache serves the matching asset set.
   v6 (2026-06-04): TWO-COLUMN filter bar (Filtern | divider | Preis), reset
                    centred below. Superseded same day by v7 (JK wanted rows).
   v7 (2026-06-04): TWO STACKED ROWS instead of two columns. Each row is a
                    horizontal "label + pills" line: row 1 = "Filtern" + taste
                    pills, row 2 = "Preis" + the 5 price pills. The two rows are
                    stacked vertically and parted by a subtle hairline; the labels
                    share one fixed-width column so "Filtern"/"Preis" line up
                    directly under each other and the pill groups start at the same
                    x-offset. Pills wrap within their own row on narrow widths.
                    "Alle Kurse" reset stays centred underneath. Mobile keeps the
                    same two-row idea: the label sits above its (wrapping) pills.
                    Pure CSS relayout — markup regrouped (.kwk-kfilter-col ->
                    .kwk-kfilter-row); pill classes + data-attrs unchanged, v5 JS
                    untouched. Filename-bumped v6.css -> v7.css.
   v8 (2026-06-04): PER-ROW "Alle" reset pill. The single central "Alle Kurse"
                    reset pill (and its .kwk-kursvielfalt-resetrow wrapper) is
                    removed; instead each row carries one pre-selected reset pill
                    at its left ("Alle Kurse" in the taste row, "Alle Preise" in
                    the price row) styled with .kwk-kfilter-allrow — same pill
                    look, copper when active, set slightly apart from the rest of
                    the row with extra trailing space. JS rewrite v5->v6 (per-group
                    reset + per-group auto-on). Filename-bumped v7.css -> v8.css.
   v9 (2026-06-04): ROW-1 CATEGORY FILTERS. Row 1 grows from 3 to 6 pills
                    (+ "Grillkurse" / "Fisch & Meeresfrüchte" / "Cocktails &
                    Drinks"). To keep the now-wider row 1 from wrapping into a
                    tall, ragged stack, the filter wrap max-width is widened
                    (720 -> 880px) so it lays out as ~2 tidy lines on desktop;
                    the price row keeps its 6 pills on (mostly) one line. Pill
                    look, copper active state, hairline + per-row reset all
                    unchanged. JS rewrite v6->v7 (OR row-1 logic + category
                    predicate + Coming-Soon-under-row-1 rule). Filename-bumped
                    v8.css -> v9.css (in lockstep with v7.js for the cache strip).
   Theme variables (--kwk-radius, --kwk-border, --kwk-gold-border, --kwk-dark2,
   --kwk-text-dim, --kwk-gold, --kwk-gold-light) come from the page theme; the
   fallbacks below kick in if a host page does not provide them. */

/* Theme-variable fallbacks (only apply if vars are not already set) */
.kwk-kursarten-grid,
.kwk-kursart-popup,
.kwk-kursart-popup-btn,
.kwk-kursvielfalt-filterwrap,
.kwk-kursvielfalt-filters {
  --kwk-radius-fallback: 12px;
  --kwk-radius-lg-fallback: 16px;
  --kwk-border-fallback: rgba(255,255,255,0.08);
  --kwk-gold-border-fallback: rgba(176,112,64,0.5);
  --kwk-dark2-fallback: #15110d;
  --kwk-text-dim-fallback: rgba(255,255,255,0.65);
  --kwk-gold-fallback: #6B422C;
  --kwk-gold-light-fallback: #8D5A3B;
}

/* === v11 Section-header alignment ===
   The inline center styles were removed from the PHP markup, so these DEFAULT
   rules restore the original CENTERED look for every page the shortcode renders
   on (kochkurse-events, offene-kurse-events, and the centered fallback for
   kursuebersicht before the page-scoped override below kicks in). */
.kwk-kursvielfalt-wrap {
  text-align: center;
}
.kwk-kursvielfalt-wrap .kwk-section-subtitle {
  margin: 0 auto 32px;
}

/* === v11 LEFT-ALIGN — ONLY on /kursuebersicht/ (page-id 65085) ===
   One clean shared left edge for the whole upper block. The intro header, the
   filter bar and the grid all sit on the 1200px content box and start at the
   SAME left edge as the Hero (which the page HTML widened to max-width:1200px).
   Scoped to body.page-id-65085 so the other two shortcode pages stay centered. */
body.page-id-65085 .kwk-kursvielfalt-wrap {
  /* shared 1200px content box, centered as a block but left-aligned inside */
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
body.page-id-65085 .kwk-kursvielfalt-wrap .kwk-section-label,
body.page-id-65085 .kwk-kursvielfalt-wrap .kwk-section-title,
body.page-id-65085 .kwk-kursvielfalt-wrap .kwk-section-subtitle {
  text-align: left;
}
/* Subtitle: keep its reading max-width but flush LEFT (no auto-centering). */
body.page-id-65085 .kwk-kursvielfalt-wrap .kwk-section-subtitle {
  margin-left: 0;
  margin-right: 0;
  max-width: 760px;
}
/* Filter bar: same left edge as the grid (the grid has no inner padding, so
   zero out the filterwrap's left padding and the row's left padding so the
   "Filtern" label + the first pill line up with the first grid card). The wrap
   spans the full 1200px content box and is no longer separately centered. */
body.page-id-65085 .kwk-kursvielfalt-wrap .kwk-kursvielfalt-filterwrap {
  max-width: 1200px;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
}
body.page-id-65085 .kwk-kursvielfalt-wrap .kwk-kfilter-row {
  padding-left: 0;
}
/* Grid already has margin:0 auto inside the now-1200px wrap => its left edge is
   the wrap's left edge. Pin it explicitly so it never re-centers narrower. */
body.page-id-65085 .kwk-kursvielfalt-wrap .kwk-kursarten-grid {
  margin-left: 0;
  margin-right: 0;
}

/* === Filter bar (v10 two-row layout, per-row "Alle" reset pill, 6-pill row 1
       single-line on desktop) === */
.kwk-kursvielfalt-filterwrap {
  position: relative;
  /* Widened 880 -> 1080px so the 6-pill taste row stays on ONE line on desktop. */
  max-width: 1080px;
  /* A touch more breathing room above the bar (to the H2/subtitle) than v9. */
  margin: 8px auto 40px;
  padding: 0 8px;
}
/* The two rows stack vertically. Each row lays out its label + pills
   horizontally (see .kwk-kfilter-row below). */
.kwk-kursvielfalt-filters {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
}
/* One label-and-pills line. Label is a fixed-width column so "Filtern" and
   "Preis" line up vertically and both pill groups start at the same x. */
.kwk-kfilter-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 2px;
}
/* Hairline between the two rows (drawn on the price row's top edge). A faint
   copper tint instead of plain white-alpha to tie in with the dark-copper-V2 look. */
.kwk-kfilter-row-price {
  border-top: 1px solid var(--kwk-gold-border, rgba(141,90,59,0.18));
}
.kwk-kfilter-row-taste { padding-top: 2px; }

.kwk-kfilter-label {
  /* Narrower column (64 -> 52px) buys horizontal room for the 6 taste pills. */
  flex: 0 0 52px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  /* Copper tint instead of washed-out grey — edler, still understated. */
  color: var(--kwk-gold-light, var(--kwk-gold-light-fallback));
  opacity: 0.82;
  user-select: none;
  white-space: nowrap;
  /* nudge baseline of the small caps label to sit with the taller pills */
  position: relative;
  top: 1px;
}
.kwk-kfilter-row-pills {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}
.kwk-kfilter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* More compact than v9 (10/18 -> 9/15) to help the 6 row-1 pills fit one line. */
  padding: 9px 15px;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--kwk-border, var(--kwk-border-fallback));
  border-radius: 999px;
  color: var(--kwk-text-dim, var(--kwk-text-dim-fallback));
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  /* Smoother, slightly slower easing for an edel feel. */
  transition: background 0.28s cubic-bezier(0.4,0,0.2,1), border-color 0.28s cubic-bezier(0.4,0,0.2,1), color 0.28s cubic-bezier(0.4,0,0.2,1), box-shadow 0.28s cubic-bezier(0.4,0,0.2,1), transform 0.18s cubic-bezier(0.4,0,0.2,1);
  font-family: inherit;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.kwk-kfilter:hover {
  background: rgba(255,255,255,0.07);
  /* Hover hints copper rather than plain white for the dark-copper-V2 palette. */
  border-color: var(--kwk-gold-border, rgba(141,90,59,0.45));
  color: #fff;
}
.kwk-kfilter:active { transform: scale(0.97); }
.kwk-kfilter-active,
.kwk-kfilter-active:hover {
  background: linear-gradient(135deg, var(--kwk-gold, var(--kwk-gold-fallback)) 0%, var(--kwk-gold-light, var(--kwk-gold-light-fallback)) 100%);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  /* copper fill — a faint copper lift (not a bright glow): neutral depth shadow
     plus a low-alpha copper halo so the active pill reads as "lit" but stays edel. */
  box-shadow: 0 1px 2px rgba(0,0,0,0.22), 0 0 0 1px rgba(141,90,59,0.25), 0 4px 14px rgba(107,66,44,0.22);
}
.kwk-kfilter svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.85;
}
.kwk-kfilter-active svg { opacity: 1; }

/* Per-row "Alle X" reset pill (first pill in each row). Same pill look; just
   set slightly apart from the specific pills with a touch of extra trailing
   space so it reads as the row's reset anchor. In its default (active) state it
   carries the standard copper fill via .kwk-kfilter-active. */
.kwk-kfilter-allrow {
  margin-right: 10px;
}

.kwk-kursvielfalt-emptystate {
  text-align: center;
  padding: 24px 16px;
  color: var(--kwk-text-dim, var(--kwk-text-dim-fallback));
  font-size: 14px;
}
.kwk-kfilter-reset {
  background: none;
  border: none;
  color: var(--kwk-gold-light, var(--kwk-gold-light-fallback));
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  padding: 0;
  margin-left: 4px;
}

/* === Grid === */
.kwk-kursarten-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.kwk-kursart-card {
  position: relative;
  border-radius: var(--kwk-radius, var(--kwk-radius-fallback));
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--kwk-border, var(--kwk-border-fallback));
  transition: border-color 0.3s, transform 0.3s, opacity 0.25s;
  aspect-ratio: 3/2;
}
.kwk-kursart-card:hover {
  border-color: var(--kwk-gold-border, var(--kwk-gold-border-fallback));
  transform: translateY(-3px);
}
.kwk-kursart-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s;
}
.kwk-kursart-card:hover img { transform: scale(1.05); }

/* Filter hide (JS toggles this class) */
.kwk-kursart-card.kwk-khidden {
  display: none !important;
}

.kwk-kursart-soon {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
  filter: grayscale(0.6);
}
.kwk-kursart-soon img { filter: blur(4px); }
.kwk-kursart-soon .kwk-kursart-name-text { color: rgba(255,255,255,0.5); }

.kwk-kursart-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.6);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 8px;
  z-index: 2;
}

/* === Labels stack (top-right) === */
.kwk-kursart-labels {
  position: absolute;
  top: 8px; right: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  z-index: 3;
  pointer-events: none;
  max-width: calc(100% - 16px);
}
.kwk-klabel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  line-height: 1.3;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  pointer-events: auto;
}
.kwk-klabel svg { width: 10px; height: 10px; flex-shrink: 0; }

/* NEU — dezent helle Pill mit dunkler Schrift, KEIN Gold */
.kwk-klabel-new {
  background: rgba(255,255,255,0.92);
  color: #1a1a1a;
  letter-spacing: 0.8px;
  font-weight: 700;
}
/* Saisonkurs — KwK copper (no gold störer), matches active filter pills + buttons */
.kwk-klabel-season {
  background: linear-gradient(135deg, var(--kwk-gold, var(--kwk-gold-fallback)) 0%, var(--kwk-gold-light, var(--kwk-gold-light-fallback)) 100%);
  color: #fff;
}
/* Sonderformat — dezent violett */
.kwk-klabel-special {
  background: rgba(124,58,237,0.78);
  color: #fff;
}
/* Vegetarisch (veggie=only) — FILLED solid green: this course IS vegetarian.
   Kräftiges, deckendes Grün + weiße Schrift + gefülltes Blatt-Icon. */
.kwk-klabel-veggie {
  background: linear-gradient(135deg, #2f7d33 0%, #3a9540 100%);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.12);
}
.kwk-klabel-veggie svg {
  /* filled leaf — solid green-on-white look via fill */
  fill: rgba(255,255,255,0.95);
  stroke: #fff;
  opacity: 1;
}

/* Veggie-Variante möglich (veggie=possible) — OUTLINE chip: an OPTION, not a
   property. Dezenter dunkler Backdrop + grüner Rand + grüne Schrift, Outline-
   Blatt (kein Fill). Muss sich klar vom gefüllten "Vegetarisch" abheben. */
.kwk-klabel-veggie-option {
  background: rgba(18,30,18,0.62);
  color: #8fe08f;
  border: 1px solid rgba(110,200,110,0.85);
  font-weight: 600;
}
.kwk-klabel-veggie-option svg {
  fill: none;
  stroke: #8fe08f;
  opacity: 1;
}
/* nicht Veggie — grau, durchgestrichenes Icon */
.kwk-klabel-noveggie {
  background: rgba(110,110,110,0.78);
  color: #fff;
}
.kwk-klabel-noveggie svg {
  opacity: 0.7;
  position: relative;
}
.kwk-klabel-noveggie::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: -14px;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, transparent 44%, rgba(255,255,255,0.85) 44%, rgba(255,255,255,0.85) 56%, transparent 56%);
  pointer-events: none;
}

/* === Card name + price === */
.kwk-kursart-name {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 10px 12px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.kwk-kursart-name-text {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}
.kwk-kursart-price {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.2px;
  line-height: 1.2;
}

/* === Popup === */
.kwk-kursart-popup-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.kwk-kursart-popup-overlay.kwk-open { opacity: 1; pointer-events: auto; }

.kwk-kursart-popup {
  background: var(--kwk-dark2, var(--kwk-dark2-fallback));
  border: 1px solid var(--kwk-border, var(--kwk-border-fallback));
  border-radius: var(--kwk-radius-lg, var(--kwk-radius-lg-fallback));
  max-width: 420px;
  width: 100%;
  overflow: hidden;
  position: relative;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.kwk-kursart-popup-overlay.kwk-open .kwk-kursart-popup {
  transform: translateY(0) scale(1);
}

.kwk-kursart-popup-img-wrap { position: relative; overflow: hidden; }
.kwk-kursart-popup-img {
  width: 100%; height: 220px; object-fit: cover;
  display: block;
}
.kwk-kursart-popup-img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(transparent, var(--kwk-dark2, var(--kwk-dark2-fallback)));
  pointer-events: none;
}

.kwk-kursart-popup-body { padding: 24px 24px 28px; }
.kwk-kursart-popup-title {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.3;
}
.kwk-kursart-popup-desc {
  font-size: 14px;
  color: var(--kwk-text-dim, var(--kwk-text-dim-fallback));
  font-weight: 450;
  line-height: 1.8;
  margin: 0 0 24px;
}
.kwk-kursart-popup-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--kwk-gold, var(--kwk-gold-fallback)) 0%, #8D5A3B 100%);
  color: #fff;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.kwk-kursart-popup-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 80%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: kwkBtnShimmer 3.5s ease-in-out infinite;
}
@keyframes kwkBtnShimmer {
  0%, 100% { left: -80%; }
  50% { left: 200%; }
}
.kwk-kursart-popup-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  color: #fff;
  text-decoration: none;
}
.kwk-kursart-popup-close {
  position: absolute; top: 14px; right: 14px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 0; z-index: 2;
  transition: all 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.kwk-kursart-popup-close:hover { background: rgba(0,0,0,0.65); color: #fff; }

/* === A11y focus ring (keyboard nav) === */
.kwk-kursart-card:focus-visible {
  outline: 2px solid var(--kwk-gold-light, var(--kwk-gold-light-fallback));
  outline-offset: 3px;
  border-radius: 8px;
}
.kwk-kfilter:focus-visible {
  outline: 2px solid var(--kwk-gold-light, var(--kwk-gold-light-fallback));
  outline-offset: 2px;
}

/* === Responsive === */
@media (max-width: 1024px) {
  .kwk-kursarten-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .kwk-kursarten-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 10px; }

  .kwk-kursvielfalt-filterwrap {
    margin-bottom: 28px;
    padding: 0 4px;
  }
  .kwk-kfilter { font-size: 13px; padding: 9px 14px; }

  /* Labels: shrink slightly on mobile */
  .kwk-klabel { font-size: 9px; padding: 2px 6px; }

  /* Name+price font tightened */
  .kwk-kursart-name-text { font-size: 12px; }
  .kwk-kursart-price { font-size: 10px; }
}

/* Phone (<=600px): single-line scroll. Each label sits ABOVE its own pill group
   (label no longer a side column); the pill group does NOT wrap — instead it
   scrolls HORIZONTALLY (scroll-snap, slim near-invisible scrollbar, edge fade)
   so each row stays one tappable line. The hairline between rows stays. */
@media (max-width: 600px) {
  .kwk-kursvielfalt-filterwrap {
    /* full width on phones so the scroll rows have room; fade handled below */
    max-width: 520px;
    margin: 4px auto 26px;
    padding: 0 0;
  }
  .kwk-kfilter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    padding: 16px 0;
  }
  .kwk-kfilter-row-taste { padding-top: 2px; }
  .kwk-kfilter-label {
    flex: none;
    top: 0;
    /* indent label to line up with the scrolled pills' left padding */
    padding-left: 14px;
  }
  /* horizontal scroll instead of wrap */
  .kwk-kfilter-row-pills {
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-left: 14px;
    /* inner padding so first/last pill isn't flush to the edge / fade */
    padding: 2px 14px;
    /* slim, near-invisible scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--kwk-gold-border, rgba(141,90,59,0.45)) transparent;
    /* edge fade so pills appear to slide under the container edges */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .kwk-kfilter-row-pills::-webkit-scrollbar { height: 4px; }
  .kwk-kfilter-row-pills::-webkit-scrollbar-track { background: transparent; }
  .kwk-kfilter-row-pills::-webkit-scrollbar-thumb {
    background: var(--kwk-gold-border, rgba(141,90,59,0.45));
    border-radius: 999px;
  }
  .kwk-kfilter-row-pills .kwk-kfilter {
    scroll-snap-align: start;
    flex: 0 0 auto;
  }
}

/* === v11 mobile left edge — /kursuebersicht/ only (page-id 65085) ===
   On phones the .kwk-page block spans the full viewport (width:100vw, edge-to-
   edge), so the shortcode container sits at x=0 while the Hero already carries a
   16px side padding. Bring the intro header, the grid and the filter rows onto
   the SAME 16px left edge as the Hero so the whole upper block flushes left at
   one consistent gutter on phones too. The horizontal-scroll filter mechanism
   (snap / fade / scrollbar) is left intact — only its left offset moves 14->16. */
@media (max-width: 768px) {
  body.page-id-65085 .kwk-kursvielfalt-wrap .kwk-section-label,
  body.page-id-65085 .kwk-kursvielfalt-wrap .kwk-section-title,
  body.page-id-65085 .kwk-kursvielfalt-wrap .kwk-section-subtitle {
    padding-left: 16px;
    padding-right: 16px;
  }
  body.page-id-65085 .kwk-kursvielfalt-wrap .kwk-kursarten-grid {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (max-width: 600px) {
  /* filterwrap left edge = 16px (was the 4px @max-768 / 0 @max-600 wrap padding) */
  body.page-id-65085 .kwk-kursvielfalt-wrap .kwk-kursvielfalt-filterwrap {
    padding-left: 0;
    padding-right: 0;
  }
  /* label sits above its pills (mobile) — align to the 16px gutter */
  body.page-id-65085 .kwk-kursvielfalt-wrap .kwk-kfilter-label {
    padding-left: 16px;
  }
  /* first scrolled pill starts at 16px; keep the edge-fade aligned to it */
  body.page-id-65085 .kwk-kursvielfalt-wrap .kwk-kfilter-row-pills {
    padding-left: 16px;
    scroll-padding-left: 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 14px), transparent 100%);
  }
}