:root{
  --trf-primary: #0ea5e9;
  --trf-primary-600: #0284c7;
  --trf-bg: #f8fafc;
  --trf-text: #0f172a;
  --trf-muted: #64748b;
  --trf-border: #e2e8f0;
  --trf-card: #ffffff;
  --trf-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.trf-container{ font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--trf-text); }
.trf-hero{ position: relative; margin-bottom: 1rem; }
.trf-hero-img{ width: 100%; height: clamp(180px, 30vw, 320px); object-fit: cover; border-radius: 12px; }

.trf-btn{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--trf-border);
  background:#fff; color:var(--trf-text); border-radius:10px; padding:.6rem 1rem; cursor:pointer; transition:.2s ease; }
.trf-btn:hover{ transform: translateY(-1px); box-shadow: var(--trf-shadow); }
.trf-btn-primary{ background: var(--trf-primary); color:#fff; border-color: transparent; }
.trf-btn-primary:hover{ background: var(--trf-primary-600); }
.trf-btn-secondary{ background:#fff; color:var(--trf-primary); border-color: var(--trf-primary); }
.trf-btn-link{ padding: .4rem .2rem; border:none; background:transparent; color: var(--trf-primary); text-decoration: underline; }

.trf-panel{ background: var(--trf-bg); border:1px solid var(--trf-border); border-radius:12px; padding:1rem; }
.trf-controls{ display:flex; flex-direction:column; gap:.75rem; margin-bottom:.75rem; }
.trf-control-group{ display:flex; align-items:center; gap:.75rem; flex-wrap: wrap; }
.trf-hint{ color: var(--trf-muted); font-size:.9rem; }
.trf-control-row{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:.75rem; align-items:end; }
.trf-control-row label{ display:flex; flex-direction:column; gap:.3rem; font-size:.9rem; color:var(--trf-muted); }
.trf-control-row input{ border:1px solid var(--trf-border); border-radius:8px; padding:.55rem .65rem; font-size:1rem; background:#fff; }

@media (max-width: 860px){ .trf-control-row{ grid-template-columns: 1fr 1fr 1fr 1fr; } }
@media (max-width: 640px){ .trf-control-row{ grid-template-columns: 1fr 1fr; } }

.trf-count{ font-weight:600; color: var(--trf-muted); }

.trf-map{
  width:100%;
  height: clamp(320px, 55vh, 560px); /* größer als vorher */
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--trf-border);
  margin-bottom:1rem;
}

.trf-meta{
  font-size:.92rem;
  color: var(--trf-muted);
}


.trf-results{ min-height: 48px; }
.trf-loading{ opacity:.6; pointer-events:none; }

.trf-card-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
@media (max-width: 1200px){ .trf-card-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 860px){ .trf-card-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .trf-card-grid{ grid-template-columns: 1fr; } }

.trf-card{ background: var(--trf-card); border:1px solid var(--trf-border); border-radius:12px; overflow:hidden; box-shadow: var(--trf-shadow); display:flex; flex-direction:column; }
.trf-card-media{ position:relative; aspect-ratio: 16/9; background: #e5e7eb; }
.trf-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.trf-badge{ position:absolute; top:10px; right:10px; background: rgba(14,165,233,.98); color:#fff; border-radius:999px; padding:.2rem .5rem; font-size:.85rem; font-weight:600; }

.trf-card-body{ padding:.8rem; display:flex; flex-direction:column; gap:.6rem; }
.trf-card-profile{ display:flex; align-items:center; gap:.6rem; }
.trf-card-profile img{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow: var(--trf-shadow); }
.trf-card-title{ margin:0; font-size:1.05rem; }
.trf-card-text{ margin:0; color: var(--trf-muted); min-height:2.2em; }

.trf-empty{ color: var(--trf-muted); padding:.6rem 0; }

.trf-pop{ display:flex; gap:.6rem; align-items:center; }
.trf-pop-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
.trf-pop-title a{ font-weight:700; color: var(--trf-text); text-decoration:none; }
.trf-pop-addr{ color: var(--trf-muted); font-size:.95rem; }




/* Loader Overlay für die Karte */
.trf-loader {
  position: relative;
  height: 0;
}
#trf-map {
  position: relative;
}
#trf-map-loader[aria-hidden="false"] {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.6);
  z-index: 10;
}
.trf-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(0,0,0,0.15);
  border-top-color: rgba(0,0,0,0.6);
  border-radius: 50%;
  animation: trf-spin 0.8s linear infinite;
}
@keyframes trf-spin { to { transform: rotate(360deg); } }

/* Skeleton Cards (4 Spalten wie später) */
.trf-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}
.trf-skel-card {
  height: 220px;
  border-radius: 16px;
  background: linear-gradient(90deg, #f2f3f5 25%, #e9eaee 37%, #f2f3f5 63%);
  background-size: 400% 100%;
  animation: trf-shimmer 1.2s ease-in-out infinite;
}
@keyframes trf-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* Kleinere Screens */
@media (max-width: 1024px) {
  .trf-skeleton-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .trf-skeleton-grid { grid-template-columns: 1fr; }
}

#trf-map { position: relative; }
#trf-map-loader[aria-hidden="false"]{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(255,255,255,.6); z-index:10; }
.trf-spinner{ width:36px; height:36px; border:3px solid rgba(0,0,0,.15); border-top-color:rgba(0,0,0,.6); border-radius:50%; animation:trfspin .8s linear infinite;}
@keyframes trfspin{to{transform:rotate(360deg)}}
.trf-skeleton-grid{ display:grid; gap:16px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.trf-skel-card{ height:220px; border-radius:16px; background:linear-gradient(90deg,#f2f3f5 25%,#e9eaee 37%,#f2f3f5 63%); background-size:400% 100%; animation:trfshim 1.2s ease-in-out infinite;}
@keyframes trfshim{0%{background-position:100% 0}100%{background-position:0 0}}
@media (max-width:1024px){ .trf-skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .trf-skeleton-grid{grid-template-columns:1fr;} }

.trf-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem }
.trf-btn-small { padding:.4rem .6rem; font-size:.875rem; line-height:1.2 }
.trf-card-banner { width:100%; height:auto; display:block; border-radius:8px 8px 0 0 }