/* 🌾 Trecker Radar – Bereinigtes Stylesheet */
:root {
  color-scheme: light;
  background: #fff !important;
  color: #000 !important;
}
/* === Allgemein === */
body {
  background-color: #fff;
  margin: 0;
  font-family: sans-serif;
  user-select: none;
  -webkit-user-select: none;
   padding-top: env(safe-area-inset-top); /* respektiert iOS Safe Area */
}

a {
  pointer-events: auto !important;
  z-index: 9999 !important;
}

/* === 📲 Install-Hinweis über dem Logo === */
/* 📲 Install-Hinweis – als separater grüner Balken oberhalb des Headers */
#installHintBanner {
  position: relative;              /* Teil des normalen Flusses */
  display: block;
  width: 100%;
  background: #eaffea;
  color: #1a7f37;
  font-size: 0.9rem;
  text-align: center;
  padding: 8px 10px;
  border-bottom: 1px solid #c8f0c8;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  z-index: 1001;
  cursor: pointer;
  transition: background 0.3s ease;
}

#installHintBanner:hover {
  background: #d9ffd9;
}


body.menu-open #map {
  pointer-events: none;
  filter: brightness(40%); /* Karte stark abgedunkelt */
  transition: filter 0.2s ease;
}


/* === Globale Links (Standardtext-Links) === */
a {
  color: #1a7f37;                /* dein Grün */
  text-decoration: none;         /* keine Unterstreichung */
  transition: color 0.2s ease;
}

a:hover {
  color: #222;                   /* normale Textfarbe beim Hover */
  text-decoration: none;
}

/* === Dropdown Menü === */
.nav-item {
  position: relative;
}

.nav-title {
  cursor: pointer;
  font-weight: 500;
  color: #222;
}

.nav-item:hover .dropdown {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  min-width: 230px;
  padding: 8px 0;
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.2s ease;
  z-index: 1000;
}

.dropdown a {
  display: block;
  padding: 10px 14px;
  color: #333;
  font-weight: 500;
  text-decoration: none;
  text-align: left;
}

.dropdown a:hover {
  background: #e6f7ef;
  color: #1a7f37;
}

.dropdown hr {
  border: none;
  border-top: 1px solid #eee;
  margin: 6px 0;
}

/* === Karte === */
#map {
  width: 100%;
  height: 80vh;
}

/* 🧭 Popup-Container */
.spot-popup {
  font-family: system-ui, sans-serif;
  font-size: 15px;
  color: #222;
  max-width: 260px;
  line-height: 1.4;
}

/* 🏷️ Titel */
.spot-popup h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 500;
  color: #222;
}

/* 🖼️ Bild */
.spot-popup .popup-photo {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* 📄 Textabschnitte */
.spot-popup p {
  margin: 4px 0;
}

/* 🕓 Zeitinfo */
.spot-popup .time-info {
  margin-top: 6px;
  font-size: 13px;
  color: #777;
}

/* 🌐 Links / Buttons */
.spot-popup a {
  display: inline-block;
  padding: 5px 10px;
  background: #f3f3f3;
  color: #006400;
  border-radius: 6px;
  text-decoration: none;
  margin-top: 6px;
  font-size: 14px;
  transition: background 0.2s;
}

.spot-popup a:hover {
  background: #d7f5d7;
}


/* === Popup – zentrale, endgültige Version === */
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999999;
  width: 90%;
  max-width: 650px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.spot-badge {
  display:inline-block;
  background:#f3f3f3;
  color:#333;
  font-size:12px;
  padding:3px 7px;
  border-radius:999px;
  margin-bottom:4px;
}

/* Header / Body / Footer innerhalb des Popups */
.popup-header {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 10px 0px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  z-index: 2;
}

/* Mobile Standard */
.popup-header h2 {
  margin: 0;
  font-size: 1.2rem;
  width: 280px;
}

/* 💻 Desktop breiter */
@media (min-width: 769px) {
  .popup-header h2 {
    width: 420px; /* oder was du willst */
    font-size: 1.4rem; /* falls du Desktop größer möchtest */
  }
}


.popup-header .popup-cancel {
  position: absolute;
  right: 10px;
  top: -2px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  transition: background 0.2s ease, transform 0.2s ease;
}

.popup-header .popup-cancel:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.1);
}

.popup-body {
  overflow-y: auto;
  overflow-x: hidden; 
  padding-top: 10px;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.popup-footer {
  text-align: center;
}


.popup-close {
  display: block;
  width: 100%;
  margin: 12px auto 0 auto;
  background: #1a7f37;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: background 0.2s ease, transform 0.1s ease;
}

.popup-close:hover {
  background: #156a2e;
  transform: translateY(-1px);
}

.popup-backdrop {
  z-index: 999;
}

/* === Mobile Popup Optimierung: mittig, 90% Höhe === */
@media (max-width: 768px) {
  .popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    max-width: 650px;
    max-height: 70vh;          /* verhindert Überlauf */
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* Rahmen bleibt fix */
  }

  .popup-body {
    flex: 1;
    overflow-y: auto;
	overflow-x: hidden; 
    padding-top: 10px;
    -webkit-overflow-scrolling: touch;

  }

  .popup-header {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 10px 0px 8px;
    border-bottom: 1px solid #ddd;
    z-index: 5;
  }

  .popup-header h2 {
    font-size: 1.15rem;
	width: 280px;
  }

  .popup-close {
    font-size: 1rem;
    padding: 10px;
    border-radius: 8px;
  }
}

/* === 📬 Popup: Spot-Alarm Registrierung === */
#popup-pushHint .popup-body {
  padding: 10px 0 25px;
  text-align: left;
  overflow-y: auto;              /* 🔥 Scroll aktiv */
  -webkit-overflow-scrolling: touch;
}

#popup-pushHint label {
  display: block;
  width: 100%;
  font-weight: 500;
  color: #333;
  font-size: 0.95rem;
}

#popup-pushHint .input-field {
  width: 100%;
  display: block;
  font-size: 1rem;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

#popup-pushHint button.popup-close {
  background: #1a7f37;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  transition: background 0.2s ease;
}

#popup-pushHint button.popup-close:hover {
  background: #188534;
  transform: translateY(-1px);
}


/* === SpotOverlay Fix (Desktop Standard) === */
#spotOverlayBackdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999999;
}

#spotOverlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  z-index: 99999999;
  width: 85%;
  max-width: 350px;
  max-height: 90vh;
  overflow-y: auto;
  transition: all 0.3s ease;
}

/* === 📱 Mobile Overlay Variante === */
@media (max-width: 700px) {
  #spotOverlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  z-index: 99999999;
  width: 85%;
  max-width: 350px;
  max-height: 75vh;
  overflow-y: auto;
  transition: all 0.3s ease;
  }

  #spotOverlayBackdrop {
    background: rgba(0, 0, 0, 0.5);
  }
}

/* === Galerie Grid Layout (TreckerRadar Original) === */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 Spalten auf Desktop */
  gap: 14px;
  padding: 12px;
}

.photo-card {
  background: #fafafa;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.photo-card:hover {
  transform: scale(0.98);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.photo-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #fafafa;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.photo-card img:hover {
  opacity: 0.9;
}

.photo-date {
  text-align: center;
  font-size: 14px;
  color: #333;
  padding: 8px 0 6px;
  background: #fafafa;
}

.photo-meta {
  text-align: center;
  font-size: 13px;
  color: #444;
  padding: 10px 0 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  background: #fafafa;
}

.photo-meta .emoji {
  color: #d10000;
  font-weight: bold;
}

.photo-report {
  color: inherit;
  text-decoration: underline;
  font-weight: 500;
  cursor: pointer;
}

.photo-report:hover {
  text-decoration: none;
  opacity: 0.8;
}

/* 📱 Mobil: 1 Spalte */
@media (max-width:768px) {
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .photo-date,
  .photo-meta {
    font-size: 12px;
    gap: 10px;
  }
}

/* === 🏆 Toplisten (Originaldesign) === */
.toplist-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 12px;
}
@media (max-width:768px) {
    .toplist-columns {
        grid-template-columns: 1fr;
    }
}

.toplist-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* === 🥇 Top 3 untereinander (Original) === */
.toplist-top3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width:480px) {
    .toplist-top3 {
        grid-template-columns: 1fr;
    }
}

.top-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4),
                inset 0 -2px 6px rgba(0,0,0,0.15),
                0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.top-card:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4),
                inset 0 -2px 6px rgba(0,0,0,0.15),
                0 8px 16px rgba(0,0,0,0.25);
}
.top-card h4 {
    margin: 8px 0;
    font-size: 1.05rem;
    font-weight: bold;;
}
.top-card .count {
    font-size: 1.15rem;
    font-weight: bold;
    color: #000;
}
.top-card .rank {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: bold;
    background: #fff;
    color: #333;
    padding: 4px 10px;
    border-radius: 14px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* 🥇🥈🥉 spezielle Top-Karten */
.top-card.gold {
    background: linear-gradient(145deg, #FFD700, #FFC107, #FFB300);
    background-size: 200% 200%;
    color: #000;
    animation: gradientShift 6s ease infinite;
}
.top-card.silver {
    background: linear-gradient(145deg, #EEE, #CCC, #A9A9A9);
    background-size: 200% 200%;
    color: #000;
    animation: gradientShift 8s ease infinite;
}
.top-card.bronze {
    background: linear-gradient(145deg, #CD7F32, #B87333, #8B4513);
    background-size: 200% 200%;
    color: #000;
    animation: gradientShift 10s ease infinite;
}
@keyframes gradientShift {
    0% { background-position: 0 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Rest-Liste unterhalb der Top 3 */
.toplist-rest {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
}
.toplist-rest li {
    font-size: 0.95rem;
    margin: 4px 0;
}

/* Info-Box im Kopf */
.score-info {
    margin: 15px 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fff8d1;
    border: 1px solid #f0d75a;
    font-size: 0.9rem;
    color: #333;
    text-align: left;
    line-height: 1.4;
}
.score-info strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1rem;
}

/* === Popup: Spot-Typ auswählen === */

/* === Moderner Look für Kategorie-Kacheln === */

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 15px;
  padding: 10px 5px;
  text-align: center;
}

/* 💻 Desktop: 3 Spalten */
@media (min-width: 1025px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 📱 Tablet & Mobil: 2 Spalten */
@media (max-width: 1024px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.category-card {
  background: #f5f5f7;               /* leichtes, neutrales Grau */
  border: 1px solid #ddd;            /* dezente Kontur */
  border-radius: 14px;
  padding: 18px 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
  color: #222;                       /* dunkles Grau für Text */
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  user-select: none;
}

.category-card:hover {
  background: #e8f5ec;               /* zartes Grün bei Hover */
  border-color: #1a7f37;
  color: #000;                       /* Schwarz für gute Lesbarkeit */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.category-card:active {
  transform: scale(0.98);
}

@media (max-width: 600px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .category-card {
    font-size: 0.95rem;
    padding: 15px 8px;
  }
}

.category-card strong {
  display: block;
  font-size: 1rem;
  margin: 4px 0;
}

.category-card small {
  color: #666;
  font-size: 0.82rem;
  font-weight: normal;
}


/* === Spot melden Input (universell für alle Popups) === */

.popup .input-field {
  width: 100%;
  font-size: 1rem;
  padding: 12px;
  display: block;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  margin-top: 5px;
}

.popup .file-input {
  width: 100%;
  font-size: 1rem;
  padding: 12px;
  display: block;
  border: 2px dashed #0099cc;
  border-radius: 8px;
  background-color: #f0faff;
  cursor: pointer;
  box-sizing: border-box;
  margin-top: 10px;
}

.popup label {
  font-size: 0.95rem;
  font-weight: 500;
  color: #333;
  margin-top: 10px;
}

input,
textarea,
select {
  font-size: 16px !important;
}

button[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important; /* bleibt blockiert */
}

/* ✅ Aktivierte Buttons wieder freigeben */
button.is-ready {
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  filter: none !important;
}

input:invalid:not(:focus):not(:placeholder-shown),
select:invalid:not(:focus):not(:placeholder-shown),
textarea:invalid:not(:focus):not(:placeholder-shown) {
  border-color: #b00;
  background: #ffecec;
}

.field-error {
  background-color: #ffecec !important;
  border-color: #ccc !important;
  transition: background-color 0.3s ease;
}

.field-ok {
  background-color: #ecffef !important;
  transition: background-color 0.3s ease;
}

.field-bad {
  background-color: #ffecec !important;
  transition: background-color 0.3s ease;
}


/* === Footer === */
footer {
  background: #fff;
  border-top: 1px solid #e2e2e2;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.05);
  text-align: center;
  padding: 25px 10px 20px;
  font-size: 0.9rem;
  color: #333;
  z-index: 50;
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.footer-meta p {
  margin: 0;
  font-size: 0.85rem;
  color: #555;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px; /* 👉 mehr Abstand zwischen den Links */
  margin-top: 10px;
}

.footer-links a {
  color: #bbb;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.3px;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #555;
  text-decoration: none;
}

.support-link {
  display: inline-block;
  margin-top: 6px;
  color: #297234;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.support-link:hover {
  color: #006c3f;
}

.footer-social {
  margin-top: 5px;
}

.social-icon {
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.social-icon:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}

.footer-version {
  font-size: 0.8rem;
  color: #999;
  margin-top: 5px;
}

/* === Inhalt === */
main.page-content {
  max-width: 1350px;
  margin: 60px auto;
  padding: 0 30px 80px;
  line-height: 1.8;
  color: #222;
  font-family: inherit;
}

h1, h2 {
  color: #111;
  font-weight: 600;
  margin-bottom: 0.6em;
}

h1 {
  font-size: 2.2rem;
  margin-bottom: 1.4em;
  text-align: left;
}

h2 {
  font-size: 1.3rem;
}

p {
  font-size: 14px;
  color: #333;
  margin-bottom: 1.2em;
}

/* === Responsive Anpassungen === */
@media (max-width:900px) {
  .desktop-only {
    display: none;
  }

  main.page-content {
    margin: 30px auto;
    padding: 0 15px 60px;
  }

  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.1rem;
  }

  #reportBtn {
    display: block;
    width: 100%;
    margin: 0 auto 10px;
  }

  #map {
    height: 85vh;
  }

  footer {
    font-size: 0.85rem;
    padding: 15px 10px 25px;
  }

  .footer-container {
    gap: 10px;
  }

  .social-icon {
    width: 30px;
    height: 30px;
  }

  .main-nav {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    text-align: center;
    padding: 0 10px;
  }

  .main-nav a, .main-nav .btn-green {
    font-size: 0.95rem;
    padding: 8px 12px;
  }
} 

/* === Utility & Funktionsklassen === */

/* Sichtbarkeit */
.hidden {
  display: none !important;
}


/* Hinweisbox */
/* 🌾 Hinweisbox (groß) */
.hint-box {
  background: #fff8e1;
  color: #444;
  font-size: 14px;
  text-align: center;
  padding: 10px 40px 10px 10px;
  position: relative;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Schließen-Button */
.hint-close {
  position: absolute;
  top: 6px;
  right: 10px;
  border: none;
  background: transparent;
  color: #666;
  font-size: 18px;
  cursor: pointer;
}

.hint-close:hover { color: #000; }

/* Minimierte Leiste */
.hint-minimized {
  display: none;
  background: #fff8e1;
  border: 1px solid #ffe082;
  color: #444;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 8px 10px;
  border-radius: 6px;
  margin: 10px auto;
  max-width: 800px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.hint-minimized:hover {
  background: #fff2b3;
}

/* Animation beim Minimieren */
.hint-box.hide {
  opacity: 0;
  transform: translateY(-10px);
}


/* 📱 Mobile Anpassung */
@media (max-width: 850px) {
  .hint-box {
    padding: 10px 15px;
    font-size: 13px;
  }

  .hint-minimized {
    min-width: 85%;
    font-size: 13px;
	padding: 10px 15px;
  }
}

/* Kommentare */
.comments-box {
  margin-top: 5px;
  font-size: 14px;
  padding-top: 3px;
  overflow: visible;      /* kein Scrollcontainer mehr */
  max-height: none;       /* keine feste Begrenzung */
}

/* 🌾 Mehr-Kommentare-Button */
.more-comments {
  text-align: center;
  margin-top: 8px;
}

.more-comments button {
  background: linear-gradient(135deg, #1a7f37, #188534);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.more-comments button:hover {
  background: linear-gradient(135deg, #188534, #166e2d);
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.more-comments button:active {
  transform: scale(0.96);
}

.more-comments button::after {
  content: " ▼";
  font-size: 13px;
}

/* Quick Reactions */
.quick-reactions {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* oder space-evenly / space-around */
  gap: 8px;
  width: 100%;
}

.tooltip {
  display:inline-block;
  position:relative;
  cursor:pointer;
  color:#1a7f37;
  margin-left:4px;
}
.tooltip::after {
  content:attr(data-tooltip);
  position:absolute;
  bottom:125%; left:50%;
  transform:translateX(-50%);
  background:#333; color:#fff;
  padding:6px 8px;
  border-radius:4px;
  font-size:12px; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity 0.2s;
}
.tooltip:hover::after { opacity:1; }

.quick-reactions button {
  background: #f4f4f4;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.2s, transform 0.15s;
}

/* Gitter-Layout für die Kommentare */
.comment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); /* → 2 Spalten auf Desktop */
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* Karte */
.comment-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  box-sizing: border-box;
}

.comment-card:hover {
  background: #f9f9f9;
  transform: scale(0.98);
}

/* Foto links */
.comment-photo {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ddd;
  background: #fafafa;
}

.comment-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Inhalt rechts */
.comment-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}

.comment-title {
  font-weight: 600;
  color: #105237;
  display: flex;
  align-items: center;
  gap: 6px;
}

.comment-title .cat-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.comment-text {
  color: #222;
  line-height: 1.4;
}

.comment-meta {
  font-size: 12px;
  color: #777;
  margin-top: 4px;
}

/* 📱 Mobil = 1 Spalte */
@media (max-width: 700px) {
  .comment-grid {
    grid-template-columns: 1fr;
  }

  .comment-card {
    flex-direction: row;
  }

  .comment-photo {
    width: 70px;
    height: 70px;
  }
}


.quick-reactions button:hover {
  background: #eee;
  transform: scale(1.1);
}

.quick-reactions span {
  font-size: 14px;
  color: #555;
}

/* Overlay-Fotoansicht */
#photoOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.9);
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 100000000;
}

#photoOverlay.hidden {
  display: none;
}

#photoOverlay img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* Dein Button-Stil */
#photoOverlay .closeBtn {
  position: relative;
  top: -10px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

#photoOverlay .closeBtn:hover {
  color: #ff4444;
}
/* ================================
   🌾 ZENTRALES POPUP-FORMULAR-STYLING
   ================================ */

/* 🔹 Chips (Hofladen-Produkte & andere) */
.chip,
.cat-chip {
  background: #f6f6f6;
  padding: 6px 10px;
  border-radius: 18px;
  cursor: pointer;
  border: 1px solid #ddd;
  font-size: 14px;
  user-select: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.chip:hover,
.cat-chip:hover {
  background: #eee;
}

.chip.active,
.cat-chip.active {
  background: #c9f5cc;
  border-color: #28a745;
  box-shadow: 0 0 0 1px #28a745 inset;
}

/* 🔹 Eingabefelder (Basis) */
.input-field {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
  transition: all 0.2s ease;
}

/* 🔴 Fehlerzustand */
.input-field.error {
  border: 2px solid #d93025 !important;
  background: #ffecec !important;
  color: #000;
  animation: shake 0.15s ease;
}

/* ✅ Gültig */
.input-field.valid {
  border: 2px solid #28a745 !important;
  background: #eaf8ea !important;
}

/* 🔸 Pflichtfeld-Warnungen */
.warnBox {
  font-size: 0.85rem;
  color: #b30000 !important;
  margin-top: 5px;
  font-weight: 500;
}

.warnBox.show,
.warnBox[style*="block"] {
  display: block !important;
}

/* 🔹 Eingabefelder (Basis) */
.input-field {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
  transition: all 0.2s ease;
}

/* 🔴 Fehlerzustand */
.input-field.error {
  border: 2px solid #d93025 !important;
  background: #ffecec !important;
  color: #000;
  animation: shake 0.15s ease;
}

/* ✅ Gültig */
.input-field.valid {
  border: 2px solid #28a745 !important;
  background: #eaf8ea !important;
}

/* 🔸 Pflichtfeld-Warnungen */
.warnBox {
  font-size: 0.85rem;
  color: #b30000 !important;
  margin-top: 5px;
  font-weight: 500;
}

.warnBox.show,
.warnBox[style*="block"] {
  display: block !important;
}

/* ✨ Mini-Schüttelanimation für Fehlfelder */
@keyframes shakeField {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-3px); }
  40%, 80% { transform: translateX(3px); }
}

.input-field.shake {
  animation: shakeField 0.25s ease;
}

/* 🔹 Save-Buttons (Standardzustand) */
button[id^="saveSpotBtn_"] {
  background: #a9dca9;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 16px;
  transition: all 0.2s ease;
  cursor: pointer;
  opacity: 1;
}

button[id^="saveSpotBtn_"].is-ready {
  background: #28a745 !important;
  opacity: 1 !important;
  box-shadow: 0 6px 14px rgba(40, 167, 69, .4);
  cursor: pointer !important;
  transform: scale(1);
}

button[id^="saveSpotBtn_"].is-ready:hover {
  box-shadow: 0 8px 18px rgba(40, 167, 69, .5);
  transform: scale(1.02);
}

button[id^="saveSpotBtn_"].is-ready:active {
  transform: scale(0.97);
}

/* 🔹 Kleine Animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
.cat-chip {
  background:#f6f6f6;
  padding:6px 10px;
  border-radius:18px;
  cursor:pointer;
  border:1px solid #ddd;
  font-size:14px;
  user-select:none;
  transition:all 0.2s ease;
}
.cat-chip:hover { background:#eee; }
.cat-chip input[type="radio"] { margin-right:5px; }
.cat-chip input[type="radio"]:checked + span,
.cat-chip input[type="radio"]:checked { accent-color:#28a745; }

/* ==========================
   🟥 Pflichtfelder visuell hervorheben
   ========================== */
.input-field.error {
  border: 2px solid #d93025 !important;
  background-color: #ffecec !important;
  color: #000 !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.input-field.valid {
  border: 2px solid #28a745 !important;
  background-color: #ecffef !important;
  color: #000 !important;
}

/* ✨ Mini-Schüttelanimation */
@keyframes shakeField {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

.input-field.shake {
  animation: shakeField 0.25s ease;
}

/* 🚨 Shake-Effekt für Fehler */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.shake {
  animation: shake 0.4s ease;
}

/* 🔴 Rahmen für Fehlergruppen */
.vehicleCategoryGroup.error,
#productChips_hofladen.error {
  border: 2px solid #e33;
  border-radius: 10px;
  padding: 8px;
  background: rgba(255, 0, 0, 0.05);
}

/* 🟢 Grüner Rahmen (validiert) */
.vehicleCategoryGroup.valid,
#productChips_hofladen.valid {
  border: 2px solid #28a745;
  border-radius: 10px;
  padding: 8px;
  background: rgba(0, 200, 0, 0.05);
  transition: all 0.3s ease;
}

/* 🔸 Rote Hinweisbox */
.warnBox {
  font-size: 0.85rem;
  color: #b30000 !important;
  font-weight: 500;
  margin-top: 3px;
  display: none;
}

.warnBox.show,
.warnBox[style*="block"] {
  display: block !important;
}

/* 🧭 Einheitliches Input-Styling */
#spot_event label {
  display: block;
  margin: 6px 0 4px;
  font-weight: 500;
}

#spot_event .input-field {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px; /* kein Zoom auf iOS */
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  line-height: 1.2;
}

#spot_event .input-field:focus {
  border-color: #1a7f37;
  box-shadow: 0 0 0 3px rgba(26, 127, 55, 0.15);
  outline: none;
}
.input-wrapper {
  border:1px solid transparent;
  border-radius:8px;
  padding:6px;
  transition:all 0.2s ease;
  margin-bottom:10px;
}
.input-wrapper.valid { border-color:#28a745; background:#f6fff6; }
.input-wrapper.error { border-color:#d33; background:#fff5f5; }
.tooltip {
  display:inline-block;
  position:relative;
  cursor:pointer;
  color:#1a7f37;
  margin-left:4px;
  margin-bottom:10px;
}
.tooltip::after {
  content:attr(data-tooltip);
  position:absolute;
  bottom:125%;
  left:50%;
  transform:translateX(-50%);
  background:#333;
  color:#fff;
  padding:6px 8px;
  border-radius:4px;
  font-size:12px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s;
  z-index:20;
}
.tooltip:hover::after { opacity:1; }
/* Popup-Container */
#spotOverlay {
  overflow-x: hidden !important; /* 🚫 kein horizontales Scrollen */
}

/* Inhalt begrenzen */
#spotOverlayContent {
  max-width: 100%;
  overflow-x: hidden;
  word-wrap: break-word; /* lange Worte umbrechen */
  box-sizing: border-box;
}

/* Alle Bilder & Tabellen im WYSIWYG-Inhalt anpassen */
#spotOverlayContent img,
#spotOverlayContent table {
  max-width: 100% !important;
  height: auto;
  display: block;
}
#spot_event * {
  box-sizing: border-box;
  max-width: 100%;
}
#spot_event #toolbar_event {
  flex-wrap: wrap;
}
/* 🎪 Fix für Event-Popup Inhalt */
#spot_event *,
#spot_event *::before,
#spot_event *::after {
  box-sizing: border-box;
  max-width: 100%;
}

#spot_event .popup-body {
  overflow-x: hidden;
}

/* Toolbar */
#spot_event #toolbar_event {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Chips */
#spot_event #eventTagsGroup {
  flex-wrap: wrap;
}

/* Bilder */
#spot_event img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* ==========================================
   🧭 Scrollverhalten in allen Popups vereinheitlicht
   ========================================== */
.popup {
  overflow: hidden; /* ❌ Popup selbst darf NICHT scrollen */
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.popup-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* ✅ weiches Scrollen auf iOS */
  scrollbar-width: thin;
  scrollbar-color: #bbb transparent;
}

/* 🖱️ Scrollbar etwas dezenter (Chrome / Edge / Safari) */
.popup-body::-webkit-scrollbar {
  width: 8px;
}
.popup-body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}
.popup-body::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.35);
}

/* 📱 Mobile: Scrollbereich auf 70% der Bildschirmhöhe begrenzen */
@media (max-width: 700px) {
  .popup {
    max-height: 75vh;
  }
}

.vote-chip {	
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 1px 10px;
  background: #fafafa;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.vote-chip:hover {
  background: #f0f0f0;
  transform: scale(1.02);
}

.vote-chip:active {
  transform: scale(0.98);
}

.vote-chip.active-up {
  background: #e8f5e9;
  border-color: #4caf50;
  color: #2e7d32;
  font-weight: 600;
}

.vote-chip.active-down {
  background: #ffebee;
  border-color: #f44336;
  color: #b71c1c;
  font-weight: 600;
}

.vote-count {
  font-size: 12px;
  color: #666;
  min-width: 18px;
  text-align: right;
  font-weight: 600;
}

.barometer {
  position: relative;
  width: 30px;
  height: 60px;
  margin: 0 auto;
  border-radius: 8px;
  background: #e0e0e0; /* hellgrau statt transparent */
  border: 1px solid #ccc;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}


.barometer-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(to top, #2e7d32, #81c784);
  transition: height 0.4s ease, background 0.4s ease;
}

.barometer-needle {
  position: absolute;
  left: 100%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 3px rgba(0,0,0,0.5);
  transform: translate(-50%, 0);
  bottom: 50%;
  transition: bottom 0.4s ease;
}

.barometer-label {
  font-size: 12px;
  margin-top: 6px;
}

#loadingOverlay::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 10px;
  width: 0%;
  background: #4caf50;
  animation: loadingBar 5s linear forwards;
}
@keyframes loadingBar {
  from { width: 0%; }
  to { width: 100%; }
}
/* ===========================================================
   🌾 Trecker Radar – Alle Spots Popup & Kartenlayout
   =========================================================== */

/* === 💬 Chips / Tags === */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 3px 0 6px;
}

.chip-small {
  background: #f1f1f1;
  border: 1px solid #ddd;
  color: #333;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  display: inline-block;
  line-height: 1.3;
  white-space: nowrap;
}

.chip-small.sold {
  background: #fff3cd;
  border: 1px solid #e6b800;
  color: #a67c00;
  font-weight: 600;
}

/* === 📊 Meta / Zeit / Reporter === */
.spot-meta {
  font-size: 13px;
  color: #555;
  line-height: 1.4;
}

.spot-time {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

/* === 📱 Mobile Ansicht === */
@media (max-width: 768px) {
  #allSpotsList {
    grid-template-columns: 1fr;
  }
  .spot-photo img {
    max-width: 100px;
    height: auto;
  }
}


/* --- Hauptkategorien nebeneinander --- */
.category-bar {
  display: flex;
  justify-content: center;
  gap: 10px 14px;
  margin-bottom: 12px;
}

.cat-chip {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.cat-chip:hover {
  background: #e8f5e9;
  border-color: #81c784;
}

.cat-chip input {
  accent-color: #2e7d32;
  transform: scale(1.1);
}

.cat-chip:has(input:checked) {
  background: #e8f5e9;
  border-color: #2e7d32;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* --- Detailfilterbox (ein-/ausblendbar) --- */
#detailFilterSection {

}

/* --- Buttons --- */
.spot-button.small {
  background: #2e7d32;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.spot-button.small:hover {
  background: #388e3c;
}

/* ✅ Einheitliches Radiobutton-Styling */
.cat-chip input[type="radio"] {
  accent-color: #28a745;
  flex-shrink: 0;
}

/* 🔘 Optional: Aktive Hervorhebung */
.cat-chip:has(input[type="radio"]:checked) {
  background: #d6f5d6;
  border-color: #46a046;
  color: #1a751a;
  font-weight: 600;
}
/* =======================================================
   🌾 TRECKER RADAR – EINHEITLICHE CHIP- & FILTEROPTIK (3-Ebenen-System)
   ======================================================= */

/* === EBENE 1: Hauptkategorien === */
.category-bar.single-select {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 4px 0;
}

/* === EBENE 2: Detailfilter (dynamisch) === */
.detail-filters {
  margin: 10px auto 12px;
  padding: 10px;
  max-width: 900px;
  transition: all 0.3s ease;
  opacity: 1;
}
.detail-filters[style*="display: none"] {
  opacity: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.filter-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* === EBENE 3: Globale Filter (Sortierung / Radius / Optionen) === */
.category-bar.all-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 14px 0 10px;
  text-align: center;
  padding-top: 10px;
}

/* === Trennlinie zwischen Gruppen (optional) === */
.chip-divider {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: #ddd;
  margin: 0 6px;
}

/* === Standard-Chip-Stil (alle Arten) === */
.cat-chip,
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: #222;
  padding: 7px 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  cursor: pointer;
  user-select: none;
  transition: all 0.25s ease;
  white-space: nowrap;
  line-height: 1.2;
}

/* Hover-Effekt */
.cat-chip:hover,
.chip:hover {
  background: #f3fff3;
  border-color: #b6e2b8;
}

/* Aktiver Chip */
.cat-chip.active,
.chip.active {
  background: #e8f5e9;
  border-color: #1a7f37;
  color: #0b3d21;
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(26,127,55,0.15);
  transform: translateY(-1px);
}

/* Checkboxen (Foto / Live) */
.cat-chip input[type="checkbox"] {
  accent-color: #1a7f37;
  transform: scale(1.1);
  margin-right: 4px;
}

/* === Kleine Chips (z. B. Subcategories im Spot-Listing) === */
.chip.small {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f2f2f2;
  border-color: #ccc;
  box-shadow: none;

  /* 🔄 Umbruch statt Abschneiden */
  display: inline-block;
  white-space: normal;    /* erlaubt Umbruch */
  word-break: break-word; /* bricht lange Wörter */
  text-align: center;     /* mittig, wenn umgebrochen */
  max-width: 100%;        /* bleibt innerhalb der Karte */
  line-height: 1.3;
}
.chip.small.active {
  background: #e3f6e3;
  border-color: #1a7f37;
}

/* === Detailfilter-Button === */
.filter-toggle {
  display: block;
  margin: 8px auto;
  background: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
}
.filter-toggle:hover {
  background: #eafbea;
  border-color: #1a7f37;
  color: #0b3d21;
}

/* =======================================================
   🌾 Sortierung & Radius – einheitliche Optik, mobil 2 Spalten
   ======================================================= */

/* === Filterzeile (Desktop: nebeneinander) === */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 14px;
}

/* === Beschriftungen === */
.filter-row label {
  font-weight: 500;
  color: #222;
  font-size: 14px;
  margin-right: 4px;
  white-space: nowrap;
}

/* === Dropdown-Stil (wie Chips) === */
.filter-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #f9f9f9
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23333'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  background-size: 10px;
  border: 1px solid #ddd;
  border-radius: 999px;
  font-size: 13px !important;
  font-weight: 500;
  color: #222;
  padding: 7px 34px 7px 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Hover & Fokus */
.filter-select:hover {
  background-color: #f3fff3;
  border-color: #b6e2b8;
}
.filter-select:focus {
  outline: none;
  border-color: #1a7f37;
  box-shadow: 0 0 0 2px rgba(26,127,55,0.15);
}

/* === Checkboxen (Foto / Live) === */
.cat-chip[data-filter="photo"],
.cat-chip[data-filter="live"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #222;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.cat-chip[data-filter="photo"]:hover,
.cat-chip[data-filter="live"]:hover {
  background: #f3fff3;
  border-color: #b6e2b8;
}

/* === Checkbox Optik === */
.cat-chip input[type="checkbox"] {
  accent-color: #1a7f37;
  transform: scale(1.1);
  margin-right: 5px;
}

/* === Responsive: unter 600px → 2 Spalten === */
@media (max-width: 600px) {
  .filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-items: stretch;
  }

  .filter-row label {
    display: block;
    font-size: 13px;
    margin-bottom: 3px;
  }

  .filter-select {
    width: 100%;
    font-size: 13px !important;
    padding: 6px 28px 6px 10px;
  }

  .cat-chip[data-filter="photo"],
  .cat-chip[data-filter="live"] {
    justify-content: flex-start;
    font-size: 13px;
    padding: 6px 12px;
  }

  .category-bar.single-select,
  .category-bar.all-filters {
    gap: 6px;
  }

  .cat-chip,
  .chip {
    font-size: 12px;
    padding: 5px 10px;
  }

  .detail-filters {
    padding: 8px;
    margin: 8px 0;
  }
}
#detailFilters .chip.active {
  background: #e8f5e9;
  border-color: #1a7f37;
  color: #0b3d21;
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(26,127,55,0.15);
  transform: translateY(-1px);
}
/* 🌾 Trecker Radar – Counter unter den Filtern */
#allSpots_counter {
  display: block;
  text-align: center;
  font-size: 13px;
  color: #555;
  margin: 6px 0 10px;
  font-weight: 500;
}

.list-status {
  display: block;
  text-align: center;
  font-size: 13px;
  color: #555;
  margin: 6px 0 10px;
  font-weight: 500;
}

/* === 📋 Grid-Container === */
#allSpotsList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* beide exakt gleich breit */
  gap: 10px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

/* === 🧩 Spotkarte === */
.spot-card {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  height: 100%;
  width: 100%;             /* fixierte Breite */
  box-sizing: border-box;  /* Innenabstände berücksichtigen */
  overflow: hidden;        /* Überlauf verhindern */
}

.spot-card:hover {
  background: #f9f9f9;
  transform: scale(0.98);
}

/* 📸 Foto / Icon links */
.spot-photo {
  flex: 0 0 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.spot-photo img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 3px;
  background: #fafafa;
}

/* 📄 Info rechts */
.spot-info {
  flex: 1;
  min-width: 0;              /* verhindert, dass Text Layout sprengt */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.spot-title {
  font-weight: 600;
  color: #222;
  display: flex;
  align-items: left;
  gap: 6px;
  margin-bottom: 2px;
  word-wrap: break-word;     /* Text bricht sauber um */
}

.spot-title .cat-icon {
  width: 18px;
  height: 18px;
}

.spot-meta {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}

/* =========================================
   📱 Mobile-Optimierung für "Alle Spots"
   ========================================= */

/* --- Filterlayout: 2 Zeilen, jeweils 2 Spalten --- */
@media (max-width: 900px) {
  .filter-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
  }

  .filter-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }

  .filter-row select,
  .filter-row .check-item,
  .filter-row label {
    flex: 1;
  }

  /* Sortierung + Umkreis nebeneinander */
  .filter-row:nth-child(1) select {
    width: 100%;
  }

  /* Foto + Live nebeneinander */
  .filter-row:nth-child(2) label {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 15px;
  }

  /* --- Spotkarten: Foto links, Text rechts --- */
  #allSpotsList {
    grid-template-columns: 1fr;
  }

  .spot-card {
    flex-direction: row !important;   /* nicht mehr untereinander */
    align-items: flex-start !important;
  }

  .spot-photo {
    flex: 0 0 90px !important;
    margin-right: 10px !important;
    margin-bottom: 0 !important;
  }

  .spot-photo img {
    width: 90px !important;
    height: 90px !important;
    object-fit: cover !important;
    border-radius: 10px;
  }

  .spot-info {
    flex: 1 !important;
  }
}



/* === Counter + Status === */
#allSpots_counter,
.list-status {
  display: block;
  text-align: center;
  font-size: 13px;
  color: #555;
  margin: 6px 0 10px;
  font-weight: 500;
}

.filter-hint {
  display: block;
  text-align: center;
  font-size: 13px;
  color: #555;
  margin: 6px 0 10px;
  font-weight: 500;
}

/* Wenn sichtbar → leicht einblenden */
.filter-hint.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.live-badge {
  width: 35px;
  height: 35px;
  vertical-align: -2px;
}

.detailfilter-title {
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}
/* --- alten Header-Button auf Mobil ausblenden --- */
@media (max-width: 900px) {
  .tr-mobile-report-btn {
    display: none !important;
  }
}

/* === 📍 Floating Spot Button über Karte (nur Mobil) === */
.map-spot-btn {
  position: fixed;
  width: 200px;
  left: 50%;
  top: 120px;                   
  transform: translateX(-50%);
  background: #198754;
  color: #fff;
  border: none;
  padding: 13px 13px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  transition: opacity 0.9s ease-in-out, transform 0.9s ease-in-out; 
  z-index: 2000;
  opacity: 1;
}

/* sanftes Ausblenden */
.map-spot-btn.hidden {
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
}

/* 🌾 Halbtransparent beim Kartenbewegen */
.map-spot-btn.fading,
#mapSpotButton.fading {
  opacity: 0.4;               /* halb durchsichtig */
  transform: translate(-50%, 0); /* bleibt zentriert */
  pointer-events: auto;       /* bleibt klickbar */
  transition: opacity 0.3s ease;
}

/* Desktop: Floating Button ausblenden */
@media (min-width: 901px) {
  .map-spot-btn {
    display: none;
  }
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 🌱 Karte: Standard (mobil = volle Höhe bis Footer) */
#map {
  flex: 1;
  width: 100%;
  display: block;
  min-height: calc(100vh - 101px - var(--footer-height, 0px));
}


/* 📱 Mobile Fix: Karte nicht unter Header, sondern exakt sichtbarer Bereich */
@media (max-width: 768px) {
  #map {
    min-height: calc(100dvh - 101px - var(--footer-height, 0px));
  }
}

/* 🦶 Footer */
footer {
  flex-shrink: 0;
}

  /* 🌾 Einheitliches Chip-Layout (wie Hofladen, aber mit Radios) */
  .cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 18px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid #ddd;
    background: #f6f6f6;
    transition: all 0.2s ease;
    user-select: none;
  }

  /* Hover-Effekt */
  .cat-chip:hover {
    background: #eee;
  }

  /* Eingebettetes Radio verstecken */
  .cat-chip input[type="radio"] {
    display: none;
  }

  /* Aktivierter Chip */
  .cat-chip input[type="radio"]:checked + span,
  .cat-chip.active {
    background: #e8f5e9;
    border-color: #b7e1b7;
    color: #1b5e20;
    font-weight: 600;
  }

  /* 2-spaltiges Layout */
  .vehicleCategoryGroup,
  .eventTagsGroup,
  .categoryGroup,
  .subcategoryGroup {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin: 8px 0 12px;
  }

  @media (min-width: 768px) {
    .vehicleCategoryGroup,
    .eventTagsGroup,
    .categoryGroup,
    .subcategoryGroup {
      grid-template-columns: repeat(2, 1fr);
    }
  }
.btn-green.back-to-map {
  display: block;
  text-align: center;
  margin: 70px 20px 00px 20px; /* ↑ mehr Abstand rundum */
  background: #1a7f37;
  color: #fff !important;
  border: none;
  border-radius: 8px;
  padding: 12px 18px; /* etwas größerer Klickbereich */
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  font-size: 16px;
}

/* Optional schöner Hover-Effekt */
.btn-green.back-to-map:hover {
  background: #188f33;
}
/* ==========================================================
   🌾 Trecker Radar – Vollbildmodus NUR für index.php
   ========================================================== */

body.isIndex {
  margin: 0;
  height: 100dvh;     /* gesamte Displayhöhe */
  overflow: hidden;   /* kein Scrollen */
  display: flex;
  flex-direction: column;
}

/* Header fix oben */
body.isIndex .tr-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px; /* Höhe deines Headers anpassen */
  z-index: 1000;
}

/* Footer fix unten – dauerhaft sichtbar */
body.isIndex footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px; /* Höhe deines Footers anpassen */
  z-index: 1000;
}

/* Kartencontainer zwischen Header und Footer */
body.isIndex #mapContainer {
  position: absolute;
  top: 80px;    /* gleich wie Headerhöhe */
  bottom: 70px; /* gleich wie Footerhöhe */
  left: 0;
  right: 0;
}

/* Karte füllt alles dazwischen */
body.isIndex #map {
  width: 100%;
  height: 100%;
}

/* Leaflet-Einstellung: mit einem Finger verschieben */
body.isIndex .leaflet-container {
  touch-action: pan-x pan-y;
}

/* 📱 Mobile: Footer kompakter darstellen */
@media (max-width: 900px) {
  body.isIndex footer {
    height: 50px;           /* kleiner, z. B. 50 px statt 70 px */
    font-size: 0.8rem;      /* Text kleiner */
    padding: 10px 8px;      /* weniger Innenabstand */
  }

  /* Karte anpassen, damit sie wieder bis über Footer reicht */
  body.isIndex #mapContainer {
    top: 80px;              /* Header-Höhe bleibt gleich */
    bottom: 50px;           /* Footer-Höhe = 50 px */
  }
}
/* 🌾 HINWEISBOX (zwischen Header und Karte) */
#hintBox {
  display: block;
  background: #fff8e1;            /* 🌕 Sanftes Gelb */
  border-bottom: 1px solid #ffe082;
  color: #444;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 10px 15px;
  z-index: 999;
  position: relative;             /* Platz unter dem Header (Desktop) */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease;
}

/* 📱 Mobil etwas kompakter */
@media (max-width: 850px) {
  #hintBox {
    font-size: 13px;
    padding: 8px 10px;            /* etwas weniger Abstand unter Header */
  }
}

/* 📎 Links im Hinweistext */
#hintBox a,
.hint-link {
  color: #105a25;
  font-weight: 600;
  text-decoration: none;
  margin: 0 4px;
}
#hintBox a:hover,
.hint-link:hover {
  text-decoration: underline;
}

/* ✳️ Dynamische Farben durch showHint() */
#hintBox[data-type="info"] {
  background: #eaffea;
  border-left: 4px solid #1a7f37;
  color: #1a7f37;
}
#hintBox[data-type="warn"] {
  background: #fff8e1;
  border-left: 4px solid #f9a825;
  color: #e67e22;
}
#hintBox[data-type="error"] {
  background: #ffeaea;
  border-left: 4px solid #c0392b;
  color: #c0392b;
}



/* 📱 Mobile (Header höher / kompakter Bereich) */
@media (max-width: 900px) {
  body.isIndex .hint-box {
    margin-top: 95px; /* etwas weiter nach unten, damit sie nicht mehr verdeckt wird */
  }
}

/* 📱 Sehr kleine Geräte (z. B. iPhone SE) */
@media (max-width: 500px) {
  body.isIndex .hint-box {
    margin-top: 100px; /* Sicherheitspuffer für hohe Header */
  }
}
/* === Footer mobil ausblenden === */
@media (max-width: 768px) {
  footer,
  #siteFooter {
    display: none !important;
  }
}

/* ======================================================
 🌾 TRECKER RADAR – HEADER, NAVIGATION & DRAWER (v1.6)
 ======================================================
 Strukturübersicht:
   1️⃣ Grundlayout & Container
   2️⃣ Header allgemein
   3️⃣ Header-Inhalte (Logo, Button, Menü, Burger)
   4️⃣ Navigation & Dropdown
   5️⃣ Drawer (Mobilmenü)
   6️⃣ Drawer-Inhalt (Scrollbereich & fester Footer)
   7️⃣ Responsive Anpassungen
====================================================== */


/* ======================================================
 1️⃣ GRUNDLAYOUT & CONTAINER
====================================================== */
.tr-container {
  max-width: 1200px;
  margin: 0 auto;
}


/* ======================================================
 2️⃣ HEADER ALLGEMEIN
====================================================== */
.tr-header {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  z-index: 9999999;
}


/* ======================================================
 3️⃣ HEADER-INHALTE (LOGO, BUTTON, MENÜ, BURGER)
====================================================== */
.tr-header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Logo & Button linksbündig */
  padding: 10px 20px;
  gap: 20px;
  position: relative;
}

/* Reihenfolge Desktop: Logo | Button | Menü | Burger (rechts nur mobil sichtbar) */
.tr-logo { order: 1; }
.tr-report-btn { order: 2; }
.tr-nav { order: 3; margin-left: auto; }
.tr-burger { order: 4; }

/* --- Logo --- */
.tr-logo {
  display: flex;
  align-items: center;
}
.tr-logo img {
  height: 80px;
  width: auto;
  display: block;
}

/* --- Spot hinzufügen / Zurück-Button --- */
.tr-report-btn {
  background: #198754;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s, transform 0.2s;
}
.tr-report-btn:hover {
  background: #157347;
  color: #fff;
  transform: scale(1.03);
  text-decoration: none;
}

/* --- Burger (mobil links) --- */
.tr-burger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  line-height: 0;
  display: none; /* nur mobil sichtbar */
  align-items: center;
  justify-content: center;
}
.tr-burger svg {
  width: 32px;
  height: 32px;
  stroke: #1a7f37;
}


/* ======================================================
 4️⃣ NAVIGATION (DESKTOP) & DROPDOWN
====================================================== */
.tr-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tr-nav a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
}
.tr-nav a:hover { color: #198754; }

/* --- Dropdown bei „Mehr“ --- */
.tr-nav-more { position: relative; }
.tr-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  padding: 8px 0;
  min-width: 250px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: all 0.15s ease;
}
.tr-nav-more:hover .tr-dropdown,
.tr-nav-more:focus-within .tr-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.tr-dropdown a {
  display: block;
  padding: 8px 14px;
  color: #333;
  text-decoration: none;
}
.tr-dropdown a:hover { background: #f5f5f5; }


/* ======================================================
 5️⃣ DRAWER (MOBILMENÜ, ÖFFNET VON LINKS)
====================================================== */
.tr-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 80%;
  max-width: 320px;
  height: 100dvh;
  background: #fff;
  box-shadow: 2px 0 10px rgba(0,0,0,0.25);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 99999000;
  display: flex;
  flex-direction: column;
}
.tr-drawer.open { transform: translateX(0); }

/* --- Drawer-Inhalt --- */
.tr-drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: visible;
  flex: 1;
  z-index: 99999999;
}

/* ❌ Schließen-Button */
.tr-close {
  position: absolute;
  top: 18px;
  right: 16px;
  background: none;
  border: none;
  font-size: 32px;
  color: #1a7f37;
  cursor: pointer;
  z-index: 10;
}


/* ======================================================
 6️⃣ DRAWER-INHALT (SCROLLBEREICH + FIXER FOOTER)
====================================================== */

/* 🔝 Scrollbarer Bereich */
.drawer-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
}
.drawer-scroll a {
  display: block;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  margin: 8px 0;
}
.drawer-scroll a:hover { color: #1a7f37; }

/* 🔻 Fixer Footer unten */
.drawer-bottom {
  flex-shrink: 0;
  background: #fafafa;
  border-top: 1px solid #e0e0e0;
  text-align: center;
  padding: 14px 10px 18px 10px;
}
.drawer-bottom .social-icon {
  width: 26px;
  height: 26px;
  margin-bottom: 6px;
}
.drawer-made {
  font-size: 0.85rem;
  color: #555;
  margin: 4px 0;
}
.drawer-version {
  font-size: 0.8rem;
  color: #888;
  margin: 0;
}

/* Scrollbar-Styling */
.drawer-scroll::-webkit-scrollbar {
  width: 6px;
}
.drawer-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.25);
  border-radius: 3px;
}




/* ======================================================
 7️⃣ RESPONSIVE ANPASSUNGEN
====================================================== */
@media (max-width: 900px) {
  /* Desktop-Menü & Button ausblenden */
  .tr-nav,
  .tr-nav-more,
  .tr-report-btn {
    display: none;
  }

  /* Burger sichtbar */
  .tr-burger {
    display: flex;
    order: 1;
  }

  /* Logo zentriert */
  .tr-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Logo kleiner */
  .tr-logo img {
    height: 60px;
  }

  /* Header gleichmäßig verteilt */
  .tr-header-inner {
    justify-content: space-between;
  }
}

@media (min-width: 901px) {
  /* Desktop Layout */
  .tr-logo {
    position: static;
    transform: none;
  }

  .tr-logo img {
    height: 80px !important;
  }

  .tr-burger {
    display: none;
  }

  .tr-header-inner {
    justify-content: flex-start;
  }
}

/* ======================================================
 🌾 Trecker Radar – Header Mobile Optimierung
 ====================================================== */
@media (max-width: 900px) {
  /* Header etwas flacher */
  .tr-header-inner {
    padding: 6px 14px;       /* weniger Innenabstand */
    min-height: 101px;        /* geringere Gesamthöhe */
  }

  /* Logo leicht vergrößern */
  .tr-logo img {
    height: 72px !important; /* größer als bisher 60px */
    width: auto;
  }

  /* Header-Hintergrund und Schatten beibehalten */
  .tr-header {
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border-bottom: 1px solid #e0e0e0;
  }

  /* Platz unter Header auf Karte anpassen */
  body.isIndex #mapContainer {
    top: 70px !important; /* angepasste neue Headerhöhe */
  }

  /* Install-Hinweis (grüner Balken) etwas tiefer setzen */
  body.isIndex .hint-box {
    margin-top: 100px !important;
  }
}


/* 📱 Floating Buttons */
#mobileFloatBtns {
  position: fixed;
  bottom: 150px;
  right: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

/* Einheitlicher Stil für alle Buttons */
#mobileFloatBtns .fab {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  color: #1a7f37;
  font-size: 1.4rem;
  border: 2px solid #1a7f37;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* Klick- und Hovereffekt */
#mobileFloatBtns .fab:hover {
  background: #1a7f37;
  color: #fff;
}

#mobileFloatBtns .fab:active {
  transform: scale(0.9);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 💻 Nur mobil sichtbar */
@media (min-width: 769px) {
  #mobileFloatBtns {
    display: none !important;
  }
}
.like-btn {
  transition: transform 0.2s ease, color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.like-btn:active {
  transform: scale(1.2);
}
.like-count {
  font-size: 13px;
  color: #666;
}
/* 💬 Sortierleiste im Kommentar-Overlay */
.sort-btn {
  background: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 6px;
  margin: 0 4px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sort-btn:hover {
  background: #e8e8e8;
}

.sort-btn.active {
  background: #1a7f37;
  border-color: #1a7f37;
  color: #fff;
}
#commentSortBar {
  display: flex;
  justify-content: space-between; /* erster links, letzter rechts */
  align-items: center;
  gap: 10px;                      /* Abstand zwischen Buttons */
  width: 100%;
}

#commentSortBar .sort-btn {
  flex: 1;                        /* Buttons werden automatisch gleichmäßig gestreckt */
  text-align: center;
  padding: 4px 0;
  font-size: 12px;
}
#allCommentsSortBar .sort-btn {
  flex: 1;
  font-size: 12px;
  padding: 4px 6px;
  text-align: center;
  border-radius: 6px;
}

#allCommentsSortBar {
  width: 100%;
}
/* 📍 Pulsierender Standortpunkt mit weißem Rand */
.youarehere-icon {
  width: 0;
  height: 0;
}

.youarehere-icon .pulse {
  width: 14px;
  height: 14px;
  background: #1992ff;           /* Hauptfarbe */
  border: 2px solid #fff;        /* Weißer Rand */
  border-radius: 50%;
  animation: pulseRing 2s infinite;
  box-shadow: 0 0 8px rgba(25, 146, 255, 0.6);
}

/* 🌊 Sanfte Puls-Animation */
@keyframes pulseRing {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(25, 146, 255, 0.4);
  }
  70% {
    transform: scale(1.5);
    box-shadow: 0 0 0 10px rgba(25, 146, 255, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(25, 146, 255, 0);
  }
}

.title-row {
  display: grid;
  grid-template-columns: 24px 1fr; /* Icon + Text */
  align-items: start;
  gap: 8px;
}

.title-row .cat-icon {
  width: 24px;
  height: 24px;
  margin-top: 2px;
}

.title-row .title-text {
  font-size: 1rem;
  line-height: 1.3;
  color: #111;
  word-break: break-word;
}
.hofladen-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.hofladen-gallery img,
.hofladen-placeholder {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 6px;
  object-fit: cover;
  cursor: pointer;
}
.hofladen-placeholder {
  background: #eee url('/img/placeholder_camera.png') center/40% no-repeat;
  opacity: 0.5;
}
/* ==========================================================
   🌾 Trecker Radar – Vollbildmodus NUR für index.php
   ========================================================== */

body.isIndex #mapContainer {
  position: absolute;
  top: 80px;    /* gleich wie Headerhöhe */
  bottom: 70px; /* gleich wie Footerhöhe */
  left: 0;
  right: 0;
}

/* Karte füllt alles dazwischen */
body.isIndex #map {
  width: 100%;
  height: 100%;
}
/* 🧭 FINALE VERSION – Scroll-to-Top Button fixiert unten rechts */
#scrollTopBtn {
  position: fixed !important;
  inset: auto 20px 20px auto !important; /* ersetzt top/left/bottom/right sauber */
  bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  right: 20px !important;
  transform: none !important; /* 🚫 kein translate, falls irgendwo übernommen */
  top: auto !important;
  left: auto !important;
  margin: 0 !important;

  width: 46px;
  height: 46px;
  background: #1a7f37;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
}

#scrollTopBtn.show {
  opacity: 1;
  visibility: visible;
}

#scrollTopBtn:hover {
  transform: translateY(-3px);
  background: #156a2e;
}

/* 💻 Desktop leicht höher */
@media (min-width: 769px) {
  #scrollTopBtn {
    right: 25px !important;
    bottom: 25px !important;
  }
}
/* 🌾 TreckerRadar Cluster-Styling */
.custom-cluster {
  background: transparent;
  border: none;
}
.custom-cluster .cluster-bubble {
  background: #1a7f37;           /* 🌿 kräftiges TreckerRadar-Grün */
  color: #fff;                   /* weiße Schrift */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: system-ui, sans-serif;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border: 2px solid #fff;
}
/* 🔔 HintBox – nur Desktop volle Breite unter dem Header */
@media (min-width: 768px) {
  #hintBox {
    position: fixed;
    top: var(--header-height, 100px);
    left: 0;
    width: 100%;
    padding: 12px 16px;
    box-sizing: border-box;
    z-index: 999;
  }
}
#extraPhotos_hofladen {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}

.extraBox {
  aspect-ratio: 1 / 1;
  border: 2px dashed #1a7f37;
  border-radius: 12px;
  background: #f9fff9;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.extraBox:hover {
  border-color: #27ae60;
  background: #f0fff0;
}

.extraAddBox {
  text-align: center;
  color: #1a7f37;
}

.plusIcon {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
}

.addLabel {
  font-size: 0.7rem;
  margin-top: 3px;
}

.extraPreview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top:0; left:0;
  border-radius: 10px;
}

.hidden { display: none !important; }
.hiddenFile { display: none !important; }