.dn-filter-bar{position:sticky;top:var(--header-h, 64px);z-index:100;background:rgba(10,10,14,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06);padding:10px 0 8px}.dn-filter-bar__inner{max-width:1280px;margin:0 auto;padding:0 2rem;display:flex;flex-direction:column;gap:8px}.dn-filter-row--main{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.dn-pill{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;color:rgba(255,255,255,.7);font-size:.88rem;transition:border-color .2s,background .2s;white-space:nowrap}.dn-pill.is-active,.dn-pill:focus-within{border-color:rgba(178,120,255,.5);background:rgba(178,120,255,.08)}.dn-pill>i{color:rgba(178,120,255,.6);font-size:.8rem;flex-shrink:0}.dn-pill input{background:0 0;border:none;color:#fff;font-size:.88rem;outline:0;min-width:0}.dn-pill input::placeholder{color:rgba(255,255,255,.35)}.dn-filter-search{flex:1 1 180px;min-width:140px;max-width:260px}.dn-filter-search input{width:100%}.dn-filter-genre{flex:0 0 auto;min-width:120px;max-width:180px;position:relative}.dn-filter-genre input{width:100px}.dn-genre-suggestions{position:absolute;top:calc(100% + 6px);left:0;min-width:180px;background:#1c1c24;border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.5)}.dn-genre-suggestion-item{padding:9px 14px;font-size:.87rem;color:rgba(255,255,255,.8);cursor:pointer}.dn-genre-suggestion-item:hover{background:rgba(178,120,255,.12);color:#fff}.dn-filter-location{flex:0 1 auto;min-width:130px;max-width:220px}.dn-filter-location input{flex:1;min-width:60px;max-width:140px}.dn-geo-btn{width:26px;height:26px;border-radius:50%;border:none;background:rgba(255,255,255,.06);color:rgba(255,255,255,.4);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.75rem;transition:background .2s,color .2s;flex-shrink:0}.dn-geo-btn:hover{background:rgba(178,120,255,.15);color:rgba(178,120,255,.8)}.dn-geo-btn.geo-active{background:rgba(178,120,255,.2);color:#b278ff}.dn-geo-btn.geo-loading{opacity:.6;cursor:default;animation:1s infinite dn-pulse}@keyframes dn-pulse{0%,100%{opacity:.6}50%{opacity:1}}.dn-filter-date{flex:0 0 auto;position:relative}.dn-filter-date input[type=date]{color:rgba(255,255,255,.7);font-size:.85rem;width:130px;cursor:pointer;-webkit-appearance:none;appearance:none}.dn-filter-date input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.6);cursor:pointer}.dn-date-clear{width:20px;height:20px;border:none;background:0 0;color:rgba(255,255,255,.4);cursor:pointer;font-size:.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}.dn-date-clear:hover{color:rgba(255,255,255,.8)}.dn-buchbar-btn{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;color:rgba(255,255,255,.6);font-size:.85rem;cursor:pointer;transition:.2s;white-space:nowrap;flex-shrink:0}.dn-buchbar-btn.is-active{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.4);color:#22c55e}.dn-buchbar-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);flex-shrink:0;transition:background .2s}.dn-buchbar-btn.is-active .dn-buchbar-dot{background:#22c55e}.dn-filter-radius{display:flex;align-items:center;gap:10px;padding:4px 2px 2px;max-width:440px}.dn-filter-radius.is-hidden{display:none}.dn-filter-radius>i{color:rgba(178,120,255,.5);font-size:.78rem;flex-shrink:0}.dn-filter-radius input[type=range]{flex:1;accent-color:#B278FF;cursor:pointer;max-width:160px;height:4px}.dn-radius-label{font-size:.82rem;font-weight:700;color:#b278ff;min-width:44px;flex-shrink:0}.dn-radius-reset{background:0 0;border:none;color:rgba(255,255,255,.3);cursor:pointer;padding:3px 6px;font-size:.78rem;display:flex;align-items:center;flex-shrink:0;border-radius:6px;transition:color .15s}.dn-radius-reset:hover{color:rgba(255,255,255,.7)}.dn-filter-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.dn-chip{height:30px;padding:0 12px;border-radius:15px;border:1px solid rgba(255,255,255,.1);background:0 0;color:rgba(255,255,255,.55);font-size:.82rem;cursor:pointer;transition:.15s;white-space:nowrap}.dn-chip:hover{border-color:rgba(178,120,255,.35);color:rgba(255,255,255,.8)}.dn-chip.is-active{background:rgba(178,120,255,.18);border-color:rgba(178,120,255,.5);color:#b278ff;font-weight:500}.dn-genre-chip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px 0 12px;border-radius:14px;background:rgba(178,120,255,.15);border:1px solid rgba(178,120,255,.3);color:#b278ff;font-size:.8rem}.dn-genre-chip button{background:0 0;border:none;color:rgba(178,120,255,.7);cursor:pointer;font-size:.9rem;line-height:1;padding:0;display:flex;align-items:center}.dn-genre-chip button:hover{color:#fff}.dn-chip--buchbar.is-active{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.4);color:#22c55e}.dn-role-tabs{display:flex;gap:4px}.dn-role-tab{height:30px;padding:0 12px;border-radius:15px;border:1px solid rgba(255,255,255,.1);background:0 0;color:rgba(255,255,255,.5);font-size:.82rem;cursor:pointer;display:flex;align-items:center;gap:5px;transition:.15s;white-space:nowrap}.dn-role-tab i{font-size:.75rem}.dn-role-tab:hover{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.75)}.dn-role-tab.is-active{background:rgba(178,120,255,.18);border-color:rgba(178,120,255,.5);color:#b278ff;font-weight:500}.dn-results-count{font-size:.78rem;color:rgba(255,255,255,.35);padding:2px 0}.dn-results-count strong{color:rgba(255,255,255,.6);font-weight:600}.dn-filter-mobile-trigger{display:none;align-items:center;gap:8px}.dn-mobile-filter-btn{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:20px;color:rgba(255,255,255,.7);font-size:.87rem;cursor:pointer;flex-shrink:0;transition:.2s}.dn-mobile-filter-btn.has-filters{border-color:rgba(178,120,255,.5);color:#b278ff;background:rgba(178,120,255,.08)}.dn-mobile-filter-btn i{font-size:.82rem}.dn-mobile-filter-badge{background:#b278ff;color:#fff;border-radius:50%;width:18px;height:18px;font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center}.dn-filter-sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:998;opacity:0;pointer-events:none;transition:opacity .3s}.dn-filter-sheet-overlay.is-open{opacity:1;pointer-events:auto}.dn-filter-sheet{position:fixed;bottom:0;left:0;right:0;background:#16161e;border-radius:20px 20px 0 0;border-top:1px solid rgba(178,120,255,.15);padding:0 20px max(1rem, env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .3s cubic-bezier(.32, .72, 0, 1);z-index:999;max-height:88dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}.dn-filter-sheet.is-open{transform:translateY(0)}.dn-sheet-handle{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.15);margin:12px auto 20px}.dn-sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.dn-sheet-title{font-size:1rem;font-weight:600;color:#fff}.dn-sheet-close{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:0 0;color:rgba(255,255,255,.5);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.85rem}.dn-sheet-section{margin-bottom:22px}.dn-sheet-section-label{font-size:.72rem;font-weight:600;letter-spacing:.08em;color:rgba(178,120,255,.7);text-transform:uppercase;margin-bottom:10px}.dn-sheet-section .dn-pill{width:100%;border-radius:12px;height:44px;padding:0 14px}.dn-sheet-section .dn-pill input{flex:1;font-size:.9rem}.dn-sheet-chips{display:flex;flex-wrap:wrap;gap:6px}.dn-sheet-chips .dn-chip{height:34px;font-size:.85rem}.dn-sheet-apply{width:100%;height:48px;border-radius:24px;border:none;background:linear-gradient(135deg,#b278ff,#8b5cf6);color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;margin-top:8px;transition:opacity .2s}.dn-sheet-apply:hover{opacity:.9}.dn-active-filters{display:flex;flex-wrap:wrap;gap:6px;min-height:0}.dn-active-filters:empty{display:none}.dn-active-pill{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px 0 10px;border-radius:13px;background:rgba(178,120,255,.12);border:1px solid rgba(178,120,255,.25);color:rgba(178,120,255,.9);font-size:.78rem}.dn-active-pill button{background:0 0;border:none;color:rgba(178,120,255,.6);cursor:pointer;font-size:.8rem;line-height:1;padding:0;display:flex;align-items:center}.dn-active-pill button:hover{color:#fff}@media (max-width:768px){.dn-filter-bar__inner{padding:0 1rem}}@media (max-width:640px){.dn-filter-row--main{display:none}.dn-filter-mobile-trigger{display:flex}.dn-filter-chips,.dn-filter-radius{display:none}}
/* ── Shared Location Filter Component ──────────────────────────── */
.dnlf-idle { display:flex; align-items:center; gap:.5rem; }
.dnlf-geo-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.38rem .85rem; border-radius:20px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.6); font-size:.78rem; font-family:inherit; cursor:pointer;
  transition:all .15s; white-space:nowrap;
}
.dnlf-geo-btn:hover { border-color:rgba(74,222,128,.4); color:#4ade80; background:rgba(74,222,128,.06); }
.dnlf-geo-btn.dnlf-loading { opacity:.6; pointer-events:none; }
.dnlf-city-wrap {
  display:none; align-items:center; gap:.4rem;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:20px; padding:.3rem .7rem .3rem .85rem;
}
.dnlf-city-wrap i { color:rgba(178,120,255,.5); font-size:.75rem; flex-shrink:0; }
.dnlf-city-input {
  background:none; border:none; outline:none; color:#fff;
  font-size:.8rem; font-family:inherit; width:120px;
}
.dnlf-city-input::placeholder { color:rgba(255,255,255,.3); }
.dnlf-city-cancel {
  background:none; border:none; color:rgba(255,255,255,.3);
  cursor:pointer; font-size:.9rem; line-height:1; padding:0 2px;
}
.dnlf-active { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.dnlf-city-pill {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .65rem .3rem .7rem; border-radius:20px;
  background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.3);
  color:#4ade80; font-size:.78rem; white-space:nowrap;
}
.dnlf-city-pill i { font-size:.7rem; }
.dnlf-clear {
  background:none; border:none; color:rgba(74,222,128,.5);
  cursor:pointer; font-size:1rem; line-height:1; padding:0 0 0 2px;
  transition:color .12s;
}
.dnlf-clear:hover { color:#4ade80; }
.dnlf-radius-row { display:flex; align-items:center; gap:.5rem; }
.dnlf-radius-slider { accent-color:#b278ff; cursor:pointer; width:90px; }
.dnlf-radius-label { font-size:.75rem; color:#b278ff; font-weight:600; min-width:42px; }

/* ── Filter Accordion (shared) ─────────────────────────────────── */
.dn-filter-accordion {
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:.4rem; margin-top:.1rem;
}
.dn-filter-accordion summary {
  display:inline-flex; align-items:center; gap:.35rem;
  cursor:pointer; list-style:none; padding:.3rem .7rem;
  border-radius:20px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04); color:rgba(255,255,255,.5);
  font-size:.75rem; font-family:inherit; transition:all .15s;
  user-select:none;
}
.dn-filter-accordion summary::-webkit-details-marker { display:none; }
.dn-filter-accordion summary .dn-acc-chevron { transition:transform .2s; font-size:.65rem; }
.dn-filter-accordion details[open] summary { border-color:rgba(178,120,255,.3); color:#c4a0ff; background:rgba(178,120,255,.07); }
.dn-filter-accordion details[open] summary .dn-acc-chevron { transform:rotate(180deg); }
.dn-filter-accordion summary .dn-acc-badge {
  background:#b278ff; color:#fff; border-radius:10px;
  padding:0 5px; font-size:.62rem; font-weight:700; min-width:16px; text-align:center;
}
.dn-filter-accordion .dn-acc-body {
  display:flex; flex-wrap:wrap; gap:.75rem; padding:.85rem 0 .4rem;
  align-items:center;
}
.dn-filter-accordion .dn-acc-group { display:flex; align-items:center; gap:.5rem; }
.dn-filter-accordion .dn-acc-label { font-size:.7rem; color:rgba(255,255,255,.35); white-space:nowrap; }

/* ── Filter Badge on Mobile Trigger ────────────────────────────── */
.dn-mobile-filter-btn .dn-filter-count {
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; border-radius:50%; background:#b278ff;
  color:#fff; font-size:.6rem; font-weight:700; margin-left:.3rem;
}

/* ── Unified single-row filter layout ──────────────────────────── */
.dn-filter-row--unified {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dn-filter-row--unified::-webkit-scrollbar { display: none; }
.dn-filter-row--unified .dn-filter-search { flex: 1; min-width: 160px; }

/* Inline chips (same row as search on desktop) */
.dn-filter-chips--inline {
  display: flex;
  gap: .35rem;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.dn-filter-chips--inline .dn-chip {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Inline accordion — icon-only trigger, dropdown body */
.dn-filter-accordion--inline {
  position: relative;
  flex-shrink: 0;
}
.dn-filter-accordion--inline > summary {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .38rem .65rem;
  margin: 0;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.5);
  font-size: .78rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: all .15s;
  white-space: nowrap;
}
.dn-filter-accordion--inline > summary::-webkit-details-marker { display: none; }
.dn-filter-accordion--inline > summary:hover {
  border-color: rgba(178,120,255,.3);
  color: #c4a0ff;
  background: rgba(178,120,255,.07);
}
.dn-filter-accordion--inline[open] > summary {
  border-color: rgba(178,120,255,.4);
  color: #c4a0ff;
  background: rgba(178,120,255,.1);
}
.dn-filter-accordion--inline[open] .dn-acc-chevron { transform: rotate(180deg); }

/* Dropdown body — floats below the row */
.dn-acc-body--dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 150;
  background: rgba(14,11,20,.97);
  border: 1px solid rgba(178,120,255,.18);
  border-radius: 14px;
  padding: .85rem 1rem;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
  min-width: 280px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  backdrop-filter: blur(16px);
}

@media (max-width: 640px) {
  /* WICHTIG: !important nötig — überschreibt die spätere
     `.dn-filter-row--unified { display: flex }`-Regel mit gleicher Spezifität */
  .dn-filter-row--main,
  .dn-filter-row--main.dn-filter-row--unified { display: none !important; }
  .dn-filter-mobile-trigger { display: flex !important; }
  .dn-filter-chips,
  .dn-filter-chips--inline,
  .dn-filter-radius,
  .dn-filter-accordion--inline { display: none !important; }

  .dn-filter-row--unified { gap: .4rem; }
  .dn-acc-body--dropdown { right: auto; left: 0; min-width: 240px; }
}

/* Mobile-Trigger sicher ausgerichtet */
@media (max-width: 640px) {
  .dn-filter-mobile-trigger {
    width: 100%;
    gap: .5rem;
  }
  .dn-filter-mobile-trigger .dn-pill {
    flex: 1 1 auto;
    min-width: 0;
  }
  .dn-mobile-filter-btn {
    flex-shrink: 0;
  }
}

/* ── Mobile: Touch Targets ─────────────────────────────────────── */
@media (max-width: 768px) {
  .dn-chip { min-height: 40px; display:inline-flex; align-items:center; padding: 0 .85rem; }
  .dn-buchbar-btn { min-height: 40px; }
  .dn-mobile-filter-btn { min-height: 44px; padding: 0 1rem; }
  .dn-role-tab { min-height: 40px; padding: .45rem .85rem; }
}


/* Phone < 380px Defensiv-Wrap (Filter-Bar wird unter 640px eigentlich durch dn-filter-sheet ersetzt) */
@media (max-width: 380px) {
  .dn-filter-row--main { flex-wrap: wrap; overflow-x: visible; }
  .dn-filter-row--main > * { min-width: 0; flex-shrink: 1; }
  .dn-filter-search, .dn-filter-genre, .dn-filter-location { flex: 1 1 100%; max-width: 100%; }
}

/* ── Body-Scroll-Lock wenn Filter-Sheet offen (iOS-Rubberband-Schutz) ─── */
body:has(.dn-filter-sheet.is-open) {
  overflow: hidden;
  touch-action: none;
}

/* ── Role-Tabs als horizontaler Scroll-Container auf Mobile ──────────── */
@media (max-width: 768px) {
  .dn-role-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 2px 1rem;
    margin: 0 -1rem;
    gap: .35rem;
    /* Fade-Edge-Hint dass es scrollbar ist */
    mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .dn-role-tabs::-webkit-scrollbar { display: none; }
  .dn-role-tab {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

/* ── Sheet-Apply als sticky-bottom — immer im Daumenbereich ──────────── */
@media (max-width: 768px) {
  .dn-filter-sheet .dn-sheet-apply {
    position: sticky;
    bottom: 0;
    z-index: 2;
    box-shadow: 0 -16px 28px rgba(22, 22, 30, .85);
  }
}