/* Dates section container */
.dates-section-box { background: var(--grey-100); border-radius: var(--r-xl); padding: var(--sp-6); }

/* Status badges (confirmed / almost) */
.badge-slot { min-width: var(--touch-target); }
.date-card-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: var(--r-circle);
  cursor: help;
  position: relative;
}
.date-card-badge[data-tooltip]:hover::after,
.date-card-badge[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--sp-2));
  left: 50%;
  transform: translateX(-50%);
  background: var(--black);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  white-space: normal;
  max-width: min(200px, 90vw);
  width: max-content;
  text-align: center;
  z-index: var(--z-tooltip);
  pointer-events: none;
}
.date-card-badge--confirmed {
  background: var(--green-50);
}
.date-card-badge--confirmed svg {
  width: 26px;
  height: 26px;
  color: var(--green-600);
}
.date-card-badge--almost {
  background: var(--orange-50);
  gap: 2px;
}
.date-card-badge--almost svg {
  width: var(--icon-md-sm);
  height: var(--icon-md-sm);
  color: var(--orange-600);
}
.date-card-badge--warn {
  background: var(--orange-50);
}
.date-card-badge--warn svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
  color: var(--orange-600);
}
.date-card-badge--out {
  background: var(--grey-200);
}
.date-card-badge--out svg {
  width: var(--icon-sm-md);
  height: var(--icon-sm-md);
  color: var(--grey-500);
}
.date-card-badge--waitlist-full {
  background: var(--grey-200);
}
.date-card-badge--waitlist-full svg {
  width: var(--icon-md-sm);
  height: var(--icon-md-sm);
  color: var(--grey-500);
}
.legende-circle--waitlist-full { background: var(--grey-200); color: var(--grey-500); }
.date-card-badge--early {
  background: var(--teal-50);
}
.date-card-badge--early svg {
  width: var(--icon-sm-md);
  height: var(--icon-sm-md);
  color: var(--teal-600);
}
.badge-plus {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--orange-600);
  line-height: var(--lh-none);
  margin-left: -3px;
}

.filters {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.dates { display: grid; gap: var(--sp-3); }
.date-card {
  display: grid;
  grid-template-columns: var(--date-tile-size) auto auto 1fr auto auto auto auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5) var(--sp-6);
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  transition: box-shadow var(--dur-base), border-right-color var(--dur-base), border-top-color var(--dur-base), border-bottom-color var(--dur-base);
  border-left: 12px solid var(--green-600);
}
.date-card[data-avail="warn"]       { border-left-color: var(--orange-600); }
.date-card[data-avail="out"]        { border-left-color: var(--grey-300); }
.date-card[data-avail="waitlist-full"] { border-left-color: var(--grey-300); }
@media (hover: hover) {
  .date-card:hover { box-shadow: var(--shadow-md); border-right-color: var(--grey-300); border-top-color: var(--grey-300); border-bottom-color: var(--grey-300); }
}
.date-card.sold-out { background: var(--grey-100); }
.date-card.sold-out .date-card-title, .date-card.sold-out .date-card-meta, .date-card.sold-out .date-card-price, .date-card.sold-out .date-card-format-label { color: var(--grey-500); }
.date-card.sold-out .date-tile { background: var(--grey-200); }
.date-card.sold-out .date-tile .month { color: var(--grey-500); }

.date-tile {
  width: var(--date-tile-size);
  height: var(--date-tile-size);
  background: var(--orange-50);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.date-tile .month { font-size: var(--fs-lg); font-weight: 700; color: var(--orange-600); text-transform: uppercase; letter-spacing: var(--ls-wide); }

/* Mobile-only DOM elements (shown by mobile.css §"Date card" at ≤960px).
   .date-card-footer is transparent on desktop so its children — price,
   details-btn, .btn — participate directly in the .date-card grid. */
.date-card-pills,
.date-card-format-type,
.date-card-location     { display: none; }
.date-card-footer  { display: contents; }
.date-card-badges  { display: flex; gap: var(--sp-1); align-items: center; }
.date-card-info { min-width: min(200px, 100%); }
.date-card-title { font-size: var(--fs-base); font-weight: 600; color: var(--black); }
.date-card-meta { font-size: var(--fs-sm); color: var(--grey-500); margin-top: var(--sp-1); display: flex; align-items: center; gap: var(--sp-4); }
.meta-item { display: flex; align-items: center; gap: var(--sp-1-5); }
.meta-icon { display: flex; flex-shrink: 0; color: var(--grey-400); }
.meta-icon svg { width: var(--icon-xs); height: var(--icon-xs); }
.date-card-format {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  margin-left: 0;
  min-width: 130px;
}
.date-card-icon { width: var(--icon-md-sm); height: var(--icon-md-sm); flex-shrink: 0; color: var(--orange-600); }
.date-card-format-label { font-size: var(--fs-base); font-weight: 600; color: var(--black); white-space: nowrap; }
.date-card-price { font-size: var(--fs-base); font-weight: 700; color: var(--black); white-space: nowrap; }
.price-early { color: var(--teal-600); display: block; }
.price-original { text-decoration: line-through; color: var(--grey-400); font-weight: 400; font-size: 0.75em; display: block; line-height: var(--lh-tight); }
.date-card-price small { display: block; font-size: var(--fs-2xs); color: var(--grey-500); font-weight: 400; margin-top: 2px; }

/* Date Card Details */
.date-card-details-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  background: none;
  border: 1px solid var(--grey-200);
  border-radius: var(--r-sm);
  padding: var(--sp-1-5) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--grey-500);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--dur-base), color var(--dur-base);
}
.date-card-details-btn:hover { border-color: var(--black); color: var(--black); }
.details-open .date-card-details-btn { color: var(--orange-600); border-color: var(--orange-600); }
.date-card-details-btn:focus-visible { outline: 2px solid var(--orange-600); outline-offset: 2px; }
.date-card-details-icon { width: var(--icon-xs); height: var(--icon-xs); }
/* Details panel (renderDateDetails()): left "where · when" + address, right
   status + contact link — an online date without status is one line. */
.date-card-details {
  display: none;
  grid-column: 1 / -1;
  background: var(--grey-100);
  border-radius: var(--r-md);
  margin-top: var(--sp-1);
  padding: var(--sp-3) var(--sp-5);
}
.details-open .date-card-details { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
/* The right block moves below (still right-aligned) only when both don't fit in one line */
.date-details-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.date-details-side { flex: 0 1 auto; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.date-details-strip { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.date-details-fact { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--black); }
.date-details-fact svg { width: var(--icon-md-sm); height: var(--icon-md-sm); color: var(--orange-600); flex-shrink: 0; }
.date-details-sep { width: 1px; height: 1.2em; background: var(--grey-300); }
.date-details-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
.date-details-pill {
  display: inline-flex; align-items: center; gap: var(--sp-1-5);
  padding: 3px var(--sp-2-5); border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; line-height: var(--lh-snug);
}
.date-details-pill svg { width: 13px; height: 13px; flex-shrink: 0; }
.date-details-pill--confirmed { background: var(--green-50);  color: var(--green-700); }
.date-details-pill--almost,
.date-details-pill--warn      { background: var(--orange-50); color: var(--orange-700); }
.date-details-pill--out       { background: var(--grey-200);  color: var(--grey-600); }
.date-details-pill--early     { background: var(--teal-50);   color: var(--teal-700); }
.date-details-addr { display: flex; align-items: flex-start; gap: var(--sp-1-5); font-size: var(--fs-xs); color: var(--grey-600); }
.date-details-addr svg { width: 14px; height: 14px; color: var(--orange-600); flex-shrink: 0; margin-top: 1px; }
.date-details-addr a,
.date-details-ask { color: var(--teal-600); text-decoration: none; }
.date-details-addr a:hover,
.date-details-ask:hover { color: var(--teal-700); text-decoration: underline; }
.date-details-ask { font-size: var(--fs-sm); font-weight: 600; text-align: right; }

/* "Bei jedem Termin" — what applies to every date, once above the list */
.dates-all { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--grey-700); }
.dates-all-title { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--grey-500); }
.dates-all-item { display: inline-flex; align-items: center; gap: var(--sp-1-5); }
.dates-all-item svg { width: 16px; height: 16px; color: var(--orange-600); flex-shrink: 0; }

#dates-rest { display: grid; gap: var(--sp-3); }
#dates-rest.dates-hidden { display: none; }
.dates-show-all-wrap { text-align: center; margin-top: var(--sp-4); }
.dates-show-all { background: var(--teal-600); border-color: var(--teal-600); }
.dates-show-all:hover { background: var(--teal-700); border-color: var(--teal-700); }

/* Dates Legende */
.dates-legende {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--grey-200);
}
.dates-legende > [role="group"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-5);
}
.legende-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--grey-500);
}
.legende-circle {
  width: var(--icon-md);
  height: var(--icon-md);
  border-radius: var(--r-circle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 1px;
}
.legende-circle--confirmed { background: var(--green-50); color: var(--green-600); }
.legende-circle--almost { background: var(--orange-50); color: var(--orange-600); }
.legende-circle--warn { background: var(--orange-50); color: var(--orange-600); }
.legende-circle--out { background: var(--grey-200); color: var(--grey-500); }
.legende-circle--early { background: var(--teal-50); color: var(--teal-600); }
.legende-circle svg {
  width: 13px;
  height: 13px;
}
.legende-circle .legende-badge {
  font-size: 8px;
  font-weight: 700;
  color: var(--orange-600);
  line-height: var(--lh-none);
}

/* ── No-Dates empty state ─────────────────────────── */
.dates-empty {
  background: var(--grey-50);
  border: 1px dashed var(--grey-200);
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--sp-6);
  margin: var(--sp-2) 0 var(--sp-6);
}
.dates-empty-inner { max-width: 540px; margin: 0 auto; text-align: center; }
.dates-empty-heading { margin: 0 0 var(--sp-3); font-size: var(--fs-xl); font-weight: 700; }
.dates-empty-lead { margin: 0 0 var(--sp-6); color: var(--grey-500); line-height: var(--lh-relaxed); }
.dates-empty-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-bottom: var(--sp-4); }
.dates-empty-hint { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--grey-500); }
.dates-empty-crosslink { color: var(--teal-600); font-weight: 600; text-decoration: none; }
.dates-empty-crosslink:hover { color: var(--teal-700); }

/* CTA row below dates (inhouse + custom) */
.dates-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.dates-cta-row:has(.dates-cta-item:only-child) { grid-template-columns: 1fr; }
.dates-cta-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: var(--teal-50);
  border-left: 3px solid var(--teal-600);
  border-radius: var(--r-md);
}
.dates-cta-header { display: flex; align-items: center; gap: var(--sp-2); }
.dates-cta-header strong { font-size: var(--fs-sm); font-weight: 700; color: var(--black); }
.dates-cta-icon { width: var(--icon-md-sm); height: var(--icon-md-sm); color: var(--teal-600); flex-shrink: 0; }
.dates-cta-icon svg { width: var(--icon-md-sm); height: var(--icon-md-sm); }
.dates-cta-item .dates-cta-text { font-size: var(--fs-xs); color: var(--grey-500); line-height: var(--lh-normal); margin: 0; }
.dates-cta-btn {
  align-self: center;
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-4);
  background: var(--teal-600);
  color: var(--white);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-base);
}
.dates-cta-btn:hover { background: var(--teal-700); color: var(--white); }
@media (max-width: 560px) {
  .dates-cta-row { grid-template-columns: 1fr; }
  .dates-cta-item { flex-wrap: wrap; }
  .dates-cta-btn { width: 100%; text-align: center; }
}

/* ── Responsive (must live here — mobile.css loads before dates.css) ── */
@media (max-width: 1024px) {
  /* ── Date card: 2-zone compact layout ─────────── */
  .date-card {
    position: static;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
      "format  info"
      "pills   pills"
      "footer  footer"
      "expand  expand";
    column-gap: var(--sp-3-5);
    row-gap: var(--sp-2-5);
    padding: var(--sp-4-5) var(--sp-4);
    border-left-width: 6px;
    border-radius: var(--r-lg);
  }
  .date-card > .date-tile { display: none; }
  .date-card > .date-card-info {
    grid-area: info;
    min-width: 0;
    padding-right: 0;
  }
  .date-card-title { font-size: var(--fs-base); line-height: var(--lh-tight); }
  .date-card-meta {
    font-size: var(--fs-xs);
    margin-top: var(--sp-1);
    gap: var(--sp-2-5);
    flex-wrap: wrap;
  }
  .date-card > .date-card-format {
    grid-area: format;
    align-self: start;
    width: 64px;
    height: 64px;
    border-radius: var(--r-lg);
    background: var(--orange-50);
    flex-direction: column;
    gap: var(--sp-1);
    justify-content: center;
    padding: var(--sp-1-5) var(--sp-1);
    min-width: 0;
    box-sizing: border-box;
  }
  .date-card > .date-card-details  { grid-area: expand; }

  /* Hide desktop spacer and badge group (pills take over on mobile) */
  .date-card > span:not([class]),
  .date-card > .date-card-badges { display: none; }

  /* Format-tile content: icon on top, type label below */
  .date-card > .date-card-format .date-card-icon {
    width: var(--icon-md);
    height: var(--icon-md);
    color: var(--orange-600);
  }
  .date-card > .date-card-format .date-card-format-label { display: none; }
  /* Booking cards ([data-date-id], renderDateCard 'booking') carry no type/location
     line: there the tile keeps its label — the city of an in-person date, "LIVE-ONLINE" */
  .date-card[data-date-id] > .date-card-format .date-card-format-label {
    display: block;
    font-size: var(--fs-3xs);
    font-weight: 700;
    color: var(--orange-600);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    line-height: var(--lh-tight);
    text-align: center;
    white-space: normal;
    word-break: break-word;
  }
  .date-card[data-date-id][data-format="live-online"] > .date-card-format .date-card-format-label { color: var(--teal-600); }
  .date-card[data-date-id].sold-out > .date-card-format .date-card-format-label { color: var(--grey-500); }
  /* A city in capitals is wider than the tile ("MÜNCHE/N"): normal case, whole word */
  .date-card[data-date-id]:not([data-format="live-online"]) > .date-card-format .date-card-format-label {
    font-size: var(--fs-2xs);
    text-transform: none;
    letter-spacing: 0;
    word-break: normal;
  }
  .date-card > .date-card-format .date-card-format-type {
    display: block;
    font-size: var(--fs-3xs);
    font-weight: 700;
    color: var(--orange-600);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    line-height: var(--lh-tight);
    text-align: center;
    white-space: normal;
    word-break: break-word;
  }
  /* Live-Online → teal tint */
  .date-card[data-format="live-online"] > .date-card-format { background: var(--teal-50); }
  .date-card[data-format="live-online"] > .date-card-format .date-card-icon,
  .date-card[data-format="live-online"] > .date-card-format .date-card-format-type { color: var(--teal-600); }
  /* Sold-out → grey tint */
  .date-card.sold-out > .date-card-format { background: var(--grey-200); }
  .date-card.sold-out > .date-card-format .date-card-icon,
  .date-card.sold-out > .date-card-format .date-card-format-type { color: var(--grey-500); }

  .date-card-location {
    display: flex;
    align-items: center;
    gap: var(--sp-1-5);
    margin-top: var(--sp-1-5);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--black);
  }
  .date-card.sold-out .date-card-location { color: var(--grey-500); }

  /* Status pills (mobile-only) */
  .date-card > .date-card-pills {
    grid-area: pills;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1-5);
  }
  .date-card-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1-5);
    padding: var(--sp-1-5) var(--sp-2-5);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: var(--lh-none);
  }
  .date-card-pill svg { width: 13px; height: 13px; }
  .date-card-pill--confirmed { background: var(--green-50);  color: var(--green-600); }
  .date-card-pill--almost    { background: var(--orange-50); color: var(--orange-600); }
  .date-card-pill--warn      { background: var(--orange-50); color: var(--orange-600); }
  .date-card-pill--out       { background: var(--grey-200);  color: var(--grey-500); }
  .date-card-pill--early     { background: var(--teal-50);   color: var(--teal-600); }

  /* Footer: 3-column action row (Preis | Details | Buchen) */
  .date-card > .date-card-footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    border-top: 1px solid var(--grey-200);
    padding-top: var(--sp-3);
    margin-top: var(--sp-1);
  }
  .date-card-footer > .date-card-price {
    flex-shrink: 0;
    font-size: var(--fs-base);
    line-height: var(--lh-tight);
  }
  .date-card-footer > .date-card-price small {
    font-size: var(--fs-3xs);
    margin-top: 1px;
    display: block;
  }
  .date-card-footer > .date-card-details-btn {
    flex-shrink: 0;
    height: var(--touch-target);
    padding: 0 var(--sp-3);
    font-size: var(--fs-sm);
  }
  .date-card-footer > .btn {
    flex: 1;
    min-width: 0;
    height: var(--touch-target);
    font-size: var(--fs-sm);
    padding: 0 var(--sp-3);
  }

  .details-open .date-card-details {
    margin-top: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
  }

  /* The card above already says it as a text pill (not an icon as on desktop) */
  .date-details-pill--repeat { display: none; }
  .date-details-status:not(:has(.date-details-pill:not(.date-details-pill--repeat))) { display: none; }
}
@media (max-width: 640px) {
  /* Details: one column, one fact per line, everything starts on the left */
  .date-details-main { flex-basis: 100%; }
  .date-details-strip { flex-direction: column; align-items: flex-start; }
  .date-details-sep { display: none; }
  .date-details-side { margin-left: 0; align-items: flex-start; }
  .date-details-status { justify-content: flex-start; }
  .date-details-ask { text-align: left; }
}
@media (max-width: 560px) {
  .dates-legende { padding-top: var(--sp-3); }
  .legende-item { font-size: var(--fs-xs); gap: var(--sp-1-5); }
  .dates-section-box { padding: var(--sp-4); }
}
@media (max-width: 400px) {
  /* Date card footer: wrap to 2 rows — price+details top, book-btn full-width below */
  .date-card > .date-card-footer { flex-wrap: wrap; }
  .date-card-footer > .date-card-price { flex: 1; }
  .date-card-footer > .btn { flex: 0 0 100%; justify-content: center; }
}
@media (pointer: coarse) {
  .date-card-details-btn { min-height: var(--touch-target); padding: var(--sp-2) var(--sp-3); }
  .dates-cta-btn { min-height: var(--touch-target); display: inline-flex; align-items: center; }
}
@media print {
  .date-card { break-inside: avoid; }
  .dates-show-all-wrap { display: none !important; }
}