/* Reisefuchs Dashboard — Theme + Komponenten-Styles */
body { font-family: 'Inter', sans-serif; background: #f4f1ea; color: #2b241c; }
.font-display { font-family: 'Fraunces', serif; font-feature-settings: 'ss01'; letter-spacing: -0.02em; }

.hero-grad { background: linear-gradient(135deg, #1f3a2e 0%, #2d4a38 55%, #3a5240 100%); }

.card-hover { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -16px rgba(31, 58, 46, 0.20); }

.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; }
.score-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }

/* Tabs */
.tab-btn { padding: 10px 18px; border-radius: 14px 14px 0 0; font-size: 14px; font-weight: 600; color: #6b6256; cursor: pointer; border: 1.5px solid transparent; border-bottom: none; transition: all 0.15s; white-space: nowrap; }
.tab-btn:hover { color: #1f3a2e; background: #ffffff60; }
.tab-btn.active { background: #ffffff; color: #1f3a2e; border-color: #e0d8c8; box-shadow: 0 -4px 12px -8px rgba(31,58,46,0.3); }

/* Filter chips */
.filter-chip { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; border: 1.5px solid #d4cab8; cursor: pointer; transition: all 0.15s; background: #fdfbf6; }
.filter-chip:hover { border-color: #5d6b3a; }
.filter-chip.active { background: #1f3a2e; color: #f4f1ea; border-color: #1f3a2e; }

/* Authentizitäts-Balken (1–5) */
.auth-bar { display: flex; gap: 3px; }
.auth-bar span { width: 14px; height: 8px; border-radius: 2px; background: #e8e0d0; }
.auth-bar span.on { background: #5d6b3a; }
.auth-bar span.peak { background: #d9893f; }

.stat-num { font-feature-settings: 'tnum'; }
/* z-index:0 macht #map zu einem eigenen Stacking-Context -> Leaflets hohe interne z-indizes
   (Controls 1000, Popups 700) bleiben EINGESCHLOSSEN und können das Detail-Modal nicht mehr
   überdecken. Das Modal liegt zusätzlich klar darüber. */
#map { height: 480px; border-radius: 24px; box-shadow: 0 24px 48px -16px rgba(31, 58, 46, 0.14); position: relative; z-index: 0; }
#modal { z-index: 1100; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Quellen-Liste im Modal */
.quelle-link { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #ffffff; border: 1px solid #e0d8c8; font-size: 13px; transition: all 0.15s; }
.quelle-link:hover { border-color: #5d6b3a; background: #fbf9f3; }

/* Preisfenster — Custom-Doppel-Slider (Div-Griffe + Pointer-Events; robust in Safari/Touch,
   keine Native-Range-Stacking-Bugs). Klick auf die Leiste bewegt den nächsten Griff. */
.pr2 { position: relative; height: 28px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.pr2-rail { position: absolute; top: 11px; left: 0; right: 0; height: 6px; border-radius: 3px; background: #e8e0d0; }
.pr2-fill { position: absolute; top: 11px; height: 6px; border-radius: 3px; background: #5d6b3a; pointer-events: none; }
.pr2-h { position: absolute; top: 2px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: #1f3a2e; border: 2px solid #f4f1ea; box-shadow: 0 1px 5px rgba(0,0,0,.4); cursor: grab; touch-action: none; }
.pr2-h:active, .pr2-h:focus { cursor: grabbing; outline: none; box-shadow: 0 0 0 4px rgba(31,58,46,.18), 0 1px 5px rgba(0,0,0,.4); }

@media print {
  .no-print { display: none !important; }
  body { background: white; }
}