/* Filterleiste der Ticketseite (ticket-filter.js) */
.tf { display:flex; flex-direction:column; gap:12px; margin:-24px 0 28px; }
.tf-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.tf-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.tf input[type=search], .tf input[type=text], .tf select {
  font:inherit; font-size:0.95rem; color:var(--text-primary); background:var(--surface);
  border:1px solid var(--border); border-radius:10px; padding:11px 14px; outline:none; min-height:46px;
  transition:border-color 0.2s, background 0.2s;
}
.tf input:focus-visible, .tf select:focus-visible, .tf button:focus-visible { border-color:var(--blue); outline:2px solid var(--blue); outline-offset:1px; }
.tf select { cursor:pointer; padding-right:34px; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2338b6ff' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; }
html.dark .tf select option { background:#141423; color:#fff; }
.tf-search { position:relative; flex:1 1 280px; display:flex; }
.tf-search svg { position:absolute; left:14px; top:50%; width:18px; height:18px; transform:translateY(-50%); fill:none; stroke:var(--text-muted); stroke-width:2; stroke-linecap:round; pointer-events:none; }
.tf .tf-search input { width:100%; padding-left:42px; }
.tf-near { display:flex; gap:8px; flex:0 1 auto; }
.tf-plz input { width:128px; letter-spacing:0.08em; }
.tf-btn { display:inline-flex; align-items:center; gap:7px; min-height:46px; padding:0 14px; border-radius:10px; cursor:pointer;
  background:rgba(56,182,255,0.10); border:1px solid rgba(56,182,255,0.3); color:var(--blue); font:inherit; font-size:0.88rem; font-weight:600; white-space:nowrap; transition:background 0.2s; }
.tf-btn:hover { background:rgba(56,182,255,0.2); }
.tf-btn:disabled { opacity:0.55; cursor:wait; }
.tf-btn svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.tf-check { display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 4px; font-size:0.9rem; color:var(--text-secondary); cursor:pointer; user-select:none; }
.tf-check input { width:18px; height:18px; accent-color:var(--blue); cursor:pointer; }
.tf-chips { display:flex; gap:8px; flex-wrap:wrap; }
.tf-chip { display:inline-flex; align-items:baseline; gap:6px; padding:8px 14px; border-radius:100px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); color:var(--text-primary); font:inherit; font-size:0.85rem; font-weight:600; transition:border-color 0.2s, background 0.2s; }
.tf-chip small { font-size:0.75rem; font-weight:400; color:var(--text-muted); }
.tf-chip:hover { border-color:var(--border-blue); background:var(--surface-hover); }
.tf-chip.on { background:rgba(56,182,255,0.16); border-color:var(--blue); color:var(--blue); }
.tf-chip.on small { color:inherit; opacity:0.8; }
.tf-status { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; min-height:24px; font-size:0.83rem; color:var(--text-muted); }
.tf-status #tfOrigin { display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.tf-origin { color:var(--text-secondary); }
.tf-x { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0.85rem; padding:2px 4px; border-radius:6px; }
.tf-x:hover { color:var(--text-primary); }
.tf-src { color:var(--text-muted); font-size:0.75rem; text-decoration:underline; text-underline-offset:2px; }
.tf-reset { background:none; border:none; padding:0; color:var(--blue); font:inherit; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.tf-reset-inline { display:block; margin:12px auto 0; font-size:0.9rem; }
.event-distance { color:var(--blue); font-weight:600; white-space:nowrap; }
@media (max-width:600px) {
  .tf { margin-top:-28px; }
  .tf-near { flex:1 1 100%; }
  .tf-plz { flex:1; } .tf-plz input { width:100%; }
  .tf-row-2 select { flex:1 1 auto; }
  .tf-chips { flex-wrap:nowrap; overflow-x:auto; margin:0 -5%; padding:2px 5%; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .tf-chips::-webkit-scrollbar { display:none; }
  .tf-chip { flex:0 0 auto; }
}

/* Handy: kompakte Filter – Suche + Knopf „Filter“, Rest aufklappbar */
.tf-more { display:none; }
@media (max-width:760px) {
  .tf { gap:10px; margin:0 0 18px; }
  .tf-row:first-child { flex-wrap:nowrap; }
  .tf-search { flex:1 1 auto; min-width:0; }
  .tf input[type=search], .tf input[type=text], .tf select { min-height:42px; padding-top:8px; padding-bottom:8px; font-size:16px; }
  .tf-more { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; min-height:42px; padding:0 12px; border-radius:10px; border:1px solid rgba(56,182,255,.35); background:rgba(56,182,255,.08); color:var(--blue); font:inherit; font-size:.85rem; font-weight:700; cursor:pointer; }
  .tf-more svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
  .tf-more b { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--blue); color:#000; font-size:.7rem; }
  .tf-more b[hidden] { display:none; }
  .tf.is-open .tf-more { background:var(--blue); color:#000; }
  .tf:not(.is-open) .tf-collapsible { display:none; }
  .tf.is-open .tf-near { flex:1 1 100%; order:3; }
  .tf-chip { padding:6px 12px; font-size:.8rem; }
  .tf-status { min-height:0; font-size:.78rem; }
}
@media (max-width:760px) {
  .tf.is-open .tf-row:first-child { flex-wrap:wrap; }
  .tf.is-open .tf-search { flex:1 1 0; }
  .tf.is-open .tf-near { display:flex; flex:1 1 100%; order:3; }
}

/* Monats-Trenner in der Terminliste */
.tk-month { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:22px 0 -4px; padding:0 0 8px; border-bottom:2px solid var(--blue); }
.tk-month:first-child { margin-top:0; }
.tk-month h2 { font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:2rem; line-height:1; letter-spacing:.03em; color:var(--text-primary); }
.tk-month h2 span { color:var(--blue); }
.tk-month small { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); }
@media (max-width:760px) { .tk-month { margin-top:14px; } .tk-month h2 { font-size:1.5rem; } .tk-month small { font-size:.62rem; } }