* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Roboto, sans-serif;

  /* App-Feeling: kein blauer Tap-Flash, kein Doppeltipp-Zoom-Delay */
  -webkit-tap-highlight-color: transparent;

  touch-action: manipulation;

}


body, html {

  width: 100%;

  height: 100%;

  height: 100dvh;

  overflow: hidden;

  background-color: #0b1120;

  color: #fff;

  /* Verhindert natives "Pull-to-Refresh" / Gummiband-Scrollen wie in einer nativen App */
  overscroll-behavior: none;

  -webkit-user-select: none;

  user-select: none;

}

/* Text- & Formularfelder bleiben normal auswähl-/editierbar */
input, textarea, select, .modal-field, .welcome-body, .sheet-content {

  -webkit-user-select: auto;

  user-select: auto;

}

/* Scrollbare Bereiche (Modals, Bottom-Sheet) bekommen natives, "trägheitsbehaftetes" Scrollen wie in Apps */
.arcade-modal-style, .bottom-sheet, .sheet-content {

  -webkit-overflow-scrolling: touch;

  overscroll-behavior: contain;

}


/* ==========================================

   LOADING SCREEN (Mobile & Responsive Optimiert)

   ========================================== */

.loading-screen {

  position: fixed;

  inset: 0;

  background: #0b1120;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 20px;

  overflow: hidden;

  transition: opacity 0.8s ease, visibility 0.8s;

}


.loading-screen.fade-out {

  opacity: 0;

  visibility: hidden;

}


.splash-content {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 100%;

  max-width: 480px;

  box-sizing: border-box;

}


/* Dynamische Schriftgröße */

.brand-title {

  font-family: 'Story Script', cursive;

  font-size: clamp(2.2rem, 9vw, 4.5rem);

  font-weight: 400;

  background: linear-gradient(135deg, #00f2fe, #4facfe);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  margin-bottom: 12px;

  letter-spacing: 1px;

  line-height: 1.1;

  width: 100%;

  word-break: break-word;

  white-space: normal;

}


.animated-title {

  opacity: 0;

  transform: translateY(20px);

  animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;

}


.brand-claim {

  font-size: clamp(0.9rem, 3.8vw, 1.1rem);

  color: #94a3b8;

  max-width: 340px;

  margin: 0 auto 30px auto;

  line-height: 1.5;

}


.animated-claim {

  opacity: 0;

  transform: translateY(15px);

  animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s;

}


.progress-bar-container {

  width: 180px;

  max-width: 80%;

  height: 3px;

  background: rgba(255, 255, 255, 0.1);

  border-radius: 4px;

  margin: 0 auto;

  overflow: hidden;

}


.progress-bar-fill {

  width: 0%;

  height: 100%;

  background: linear-gradient(90deg, #00f2fe, #10b981);

  animation: loadProgress 3.2s linear forwards 0.2s;

}


@keyframes fadeInUp {

  to { opacity: 1; transform: translateY(0); }

}


@keyframes loadProgress {

  to { width: 100%; }

}


/* ==========================================

   MAP ELEMENT & 3D MARKER

   ========================================== */

#map {

  width: 100%;

  height: 100vh;                 /* Fallback für alte Browser */

  height: calc(var(--vh, 1vh) * 100);  /* JS-Fallback für iOS < 15.4 */

  height: 100dvh;                /* moderne Browser: echte sichtbare Höhe */

  position: absolute;

  top: 0;

  left: 0;

  z-index: 1;

}


/* Dezente Kartenquellen-Angabe (Pflichtangabe Esri/OSM) im App-Look,
   bewusst klein & unaufdringlich statt der Standard-Leaflet-Leiste */
.leaflet-control-attribution {

  background: rgba(15, 23, 42, 0.65) !important;

  color: rgba(255, 255, 255, 0.55) !important;

  font-size: 9px !important;

  line-height: 1.3;

  padding: 2px 6px !important;

  border-radius: 6px;

  max-width: 160px;

  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);

}

.leaflet-control-attribution a {

  color: rgba(255, 255, 255, 0.7) !important;

}

/* Zoom-Buttons + Attribution als Gruppe über den Drop-Pen-Banner anheben,
   damit sich unten nichts mehr überlappt */
.leaflet-bottom {

  bottom: 128px !important;

  bottom: calc(128px + env(safe-area-inset-bottom)) !important;

}


.center-pin {

  animation: pulsePin 2s infinite;

}


@keyframes pulsePin {

  0% { transform: scale(1); }

  50% { transform: scale(1.2); }

  100% { transform: scale(1); }

}


/* --- 3D SKATE / ARCADE MARKER STYLES --- */

.custom-3d-pin {

  background: transparent;

  border: none;

}


.pin-container {

  position: relative;

  width: 36px;

  height: 42px;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  cursor: pointer;

}


/* Plopp-Effekt beim Hovern / Berühren */

.pin-container:hover {

  transform: translateY(-6px) scale(1.15);

}


/* Der plastische 3D-Badge-Körper */

.pin-badge {

  width: 36px;

  height: 36px;

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 17px;

  color: #fff;

  font-weight: bold;

  position: relative;

  z-index: 2;

  

  /* 3D-Effekt durch Schattenkanten & Highlights */

  border: 2px solid rgba(255, 255, 255, 0.85);

  box-shadow: 

    0 4px 0px rgba(0, 0, 0, 0.4),            /* Harte 3D-Kante unten */

    0 8px 15px rgba(0, 0, 0, 0.6),           /* Weicher Tiefenschatten */

    inset 0 2px 2px rgba(255, 255, 255, 0.5); /* Glanzlicht oben */

}


/* Der spitze Schatten-Zeiger unter dem Schild */

.pin-pointer {

  position: absolute;

  bottom: 2px;

  width: 10px;

  height: 10px;

  background: inherit;

  transform: rotate(45deg);

  z-index: 1;

  border-right: 2px solid rgba(255, 255, 255, 0.6);

  border-bottom: 2px solid rgba(255, 255, 255, 0.6);

}


/* Farbkategorien mit Farbverläufen */

.pin-freibad {

  background: linear-gradient(135deg, #facc15 0%, #f59e0b 100%);

  color: #0b1120;

}


.pin-hallenbad {

  background: linear-gradient(135deg, #c084fc 0%, #9333ea 100%);

}


.pin-frei-hallenbad {

  background: linear-gradient(135deg, #f472b6 0%, #db2777 100%);

}


.pin-see {

  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);

}


/* Dezenter Pin für importierte Spots ohne bekannte Sprunghöhe */
.pin-unknown {

  background: linear-gradient(135deg, #64748b 0%, #475569 100%);

  color: rgba(255, 255, 255, 0.85);

  opacity: 0.82;

}


/* Glühendes Spezial-Style für Wildcards */

.pin-wildcard {

  background: linear-gradient(135deg, #ff007f 0%, #ff4b2b 100%);

  box-shadow: 

    0 4px 0px #8b0042,

    0 0 18px rgba(255, 0, 127, 0.8),

    inset 0 2px 3px rgba(255, 255, 255, 0.8);

  animation: pulseWildcard 2s infinite ease-in-out;

}


@keyframes pulseWildcard {

  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.08); }

}


/* ==========================================

   GLASS UI PANEL (Suche & Filter)

   ========================================== */

.search-panel {

  position: absolute;

  top: 16px;

  top: calc(16px + env(safe-area-inset-top));

  left: 50%;

  transform: translateX(-50%);

  z-index: 1000;

  width: calc(100% - 24px);

  max-width: 440px;

  padding: 12px;

  background: rgba(15, 23, 42, 0.85);

  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 18px;

  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);

  pointer-events: auto;

}


.search-row {

  display: flex;

  gap: 6px;

  align-items: flex-end;

  margin-bottom: 8px;

}


.filter-row {

  display: flex;

  gap: 6px;

  margin-bottom: 8px;

}


/* Farb-Legende (Auf 3D-Look angepasst) */

.legend-row {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: center;

  row-gap: 6px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 8px;

  padding: 6px 10px;

  margin-bottom: 8px;

}


.legend-item {

  display: flex;

  align-items: center;

  gap: 6px;

}


.dot {

  width: 12px;

  height: 12px;

  border-radius: 4px;

  display: inline-block;

  border: 1px solid rgba(255, 255, 255, 0.6);

  box-shadow: 0 2px 4px rgba(0,0,0,0.4);

}


.dot-freibad { background: linear-gradient(135deg, #facc15, #f59e0b); }

.dot-hallenbad { background: linear-gradient(135deg, #c084fc, #9333ea); }

.dot-see { background: linear-gradient(135deg, #38bdf8, #0284c7); }

.dot-unknown { background: linear-gradient(135deg, #94a3b8, #475569); }


.legend-text {

  font-size: 11px;

  color: #cbd5e1;

  font-weight: 500;

}


.field-group {

  display: flex;

  flex-direction: column;

}


.flex-grow { flex: 1; }

.flex-1 { flex: 1; min-width: 0; }


.field-label {

  font-size: 10px;

  font-weight: 600;

  color: #64748b;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  margin-left: 4px;

  margin-bottom: 3px;

}


.search-panel input[type="text"],

.glass-select {

  width: 100%;

  height: 38px;

  padding: 0 10px;

  border-radius: 10px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.05);

  color: #fff;

  font-size: 13px;

  outline: none;

}


.glass-select {

  cursor: pointer;

  appearance: none;

  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");

  background-repeat: no-repeat;

  background-position: right 8px center;

  background-size: 14px;

  padding-right: 24px;

}


.glass-select option {

  background: #0f172a;

  color: #fff;

}


.btn-search-glow {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 38px;

  height: 38px;

  border-radius: 10px;

  border: none;

  background: linear-gradient(135deg, #00f2fe, #4facfe);

  color: #0b1120;

  cursor: pointer;

  flex-shrink: 0;

}


/* Toggle */

.filter-footer {

  display: flex;

  align-items: center;

  padding-top: 2px;

}


.toggle-container {

  display: flex;

  align-items: center;

  gap: 8px;

  cursor: pointer;

}


.toggle-text {

  font-size: 11px;

  color: #94a3b8;

}


.toggle-container input { display: none; }


.toggle-custom {

  width: 28px;

  height: 16px;

  background: rgba(255, 255, 255, 0.15);

  border-radius: 20px;

  position: relative;

  transition: background 0.2s;

}


.toggle-custom::after {

  content: '';

  position: absolute;

  top: 2px;

  left: 2px;

  width: 12px;

  height: 12px;

  background: #fff;

  border-radius: 50%;

  transition: transform 0.2s;

}


.toggle-container input:checked + .toggle-custom {

  background: #00f2fe;

}


.toggle-container input:checked + .toggle-custom::after {

  transform: translateX(12px);

  background: #0b1120;

}


/* ==========================================

   ARCADE BANNER (Mobile-Safe)

   ========================================== */

.arcade-cta-card {

  position: absolute;

  bottom: 24px;

  bottom: calc(24px + env(safe-area-inset-bottom));

  left: 50%;

  transform: translateX(-50%);

  z-index: 1000;

  width: calc(100% - 24px);

  max-width: 420px;

  background: rgba(15, 23, 42, 0.92);

  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);

  border: 2px solid #00f2fe;

  box-shadow: 0 0 20px rgba(0, 242, 254, 0.35), 0 10px 25px rgba(0,0,0,0.6);

  border-radius: 16px;

  padding: 10px 14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  cursor: pointer;

  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s;

  pointer-events: auto;

}


.arcade-cta-card:hover {

  transform: translateX(-50%) scale(1.02);

  box-shadow: 0 0 30px rgba(255, 0, 127, 0.5), 0 12px 30px rgba(0,0,0,0.8);

  border-color: #ff007f;

}


.arcade-content {

  display: flex;

  flex-direction: column;

  min-width: 0;

}


.arcade-title {

  font-family: 'Sedgwick Ave', cursive;

  line-height: 1.1;

  display: flex;

  align-items: baseline;

  flex-wrap: wrap;

}


.g-letter {

  display: inline-block;

  font-family: 'Sedgwick Ave', cursive;

  background: linear-gradient(180deg, #ff007f, #ffd166, #00f2fe);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);

}


.arcade-sub {

  font-size: 10px;

  color: #94a3b8;

  margin-top: 2px;

  font-weight: 500;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}


.arcade-btn-wrapper { flex-shrink: 0; }


.arcade-btn-glow {

  background: linear-gradient(135deg, #ff007f, #7928ca);

  color: #fff;

  font-family: 'Sedgwick Ave', cursive;

  font-size: 11px;

  padding: 8px 10px;

  border-radius: 10px;

  box-shadow: 0 0 10px rgba(255, 0, 127, 0.6);

  letter-spacing: 0.5px;

  display: inline-block;

  white-space: nowrap;

}


/* ==========================================

   MODALS (ADD SPOT, REPORT, WELCOME, RECHTLICHES)

   ========================================== */

.modal-overlay {

  position: fixed;

  inset: 0;

  z-index: 9999;

  background: rgba(11, 17, 32, 0.85);

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 16px;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s ease, visibility 0.3s ease;

}


.modal-overlay.active {

  opacity: 1;

  visibility: visible;

}


.arcade-modal-style {

  width: 100%;

  max-width: 440px;

  max-height: 90vh;

  overflow-y: auto;

  background: #0f172a;

  border: 2px solid #00f2fe;

  box-shadow: 0 0 30px rgba(0, 242, 254, 0.3);

  border-radius: 20px;

  padding: 22px;

  position: relative;

  transform: translateY(30px) scale(0.95);

  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}


.modal-overlay.active .arcade-modal-style {

  transform: translateY(0) scale(1);

}


.modal-heading {

  font-family: 'Sedgwick Ave', cursive;

  font-size: 1.6rem;

  background: linear-gradient(135deg, #00f2fe, #ff007f);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  margin-bottom: 2px;

}


.modal-sub {

  font-size: 12px;

  color: #94a3b8;

  margin-bottom: 16px;

}


.modal-field {

  display: flex;

  flex-direction: column;

  margin-bottom: 14px;

}


.modal-field label {

  font-size: 11px;

  font-weight: 600;

  color: #cbd5e1;

  margin-bottom: 6px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}


.modal-field input[type="text"],

.modal-field textarea {

  width: 100%;

  padding: 10px 12px;

  border-radius: 10px;

  border: 1px solid rgba(255, 255, 255, 0.15);

  background: rgba(255, 255, 255, 0.05);

  color: #fff;

  font-size: 13px;

  outline: none;

}


.modal-field textarea {

  resize: vertical;

  min-height: 80px;

}


.modal-field input[type="text"]:focus,

.modal-field textarea:focus {

  border-color: #00f2fe;

}


.modal-select {

  height: 40px !important;

  font-size: 13px !important;

}


/* --- WELCOME MODAL SPECIFIC STYLES --- */

.welcome-card {

  border-color: #ff007f;

  box-shadow: 0 0 35px rgba(255, 0, 127, 0.35);

}


.welcome-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 14px;

}


.welcome-title {

  font-family: 'Sedgwick Ave', cursive;

  font-size: 1.4rem;

  background: linear-gradient(135deg, #ff007f, #00f2fe);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}


.welcome-tag {

  font-size: 9px;

  font-weight: bold;

  background: rgba(255, 0, 127, 0.2);

  color: #ff007f;

  border: 1px solid rgba(255, 0, 127, 0.4);

  padding: 2px 6px;

  border-radius: 4px;

  letter-spacing: 0.5px;

}


.welcome-body p {

  font-size: 13px;

  line-height: 1.5;

  color: #cbd5e1;

  margin-bottom: 12px;

}


.welcome-body strong {

  color: #fff;

}


.welcome-info-box {

  background: rgba(0, 242, 254, 0.08);

  border: 1px solid rgba(0, 242, 254, 0.25);

  border-radius: 10px;

  padding: 10px 12px;

  margin: 12px 0;

}


.welcome-info-box p {

  font-size: 12px;

  color: #93c5fd;

  margin-bottom: 0;

}


.welcome-btn {

  margin-top: 10px;

}

.welcome-dontshow-toggle {

  margin-top: 14px;

  justify-content: center;

}


/* Dynamic Checkbox Grid */

.checkbox-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 8px;

}


.checkbox-badge {

  display: flex;

  align-items: center;

  gap: 8px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.1);

  padding: 8px 10px;

  border-radius: 8px;

  cursor: pointer;

  transition: background 0.2s, border-color 0.2s;

}


.checkbox-badge:hover {

  background: rgba(0, 242, 254, 0.08);

  border-color: rgba(0, 242, 254, 0.3);

}


.checkbox-badge input[type="checkbox"] {

  accent-color: #00f2fe;

  width: 15px;

  height: 15px;

  cursor: pointer;

}


.checkbox-badge span {

  font-size: 12px;

  color: #cbd5e1;

}


/* Admin Notice Box */

.admin-notice {

  font-size: 11px;

  color: #94a3b8;

  background: rgba(255, 183, 3, 0.08);

  border: 1px solid rgba(255, 183, 3, 0.25);

  border-radius: 8px;

  padding: 8px 10px;

  line-height: 1.4;

  margin-bottom: 14px;

}


.admin-notice strong {

  color: #ffb703;

}


/* ==========================================
   APP-INSTALLIEREN MODAL
   ========================================== */

.install-instructions {

  display: flex;

  flex-direction: column;

  gap: 16px;

}

.install-os-block {

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 10px;

  padding: 12px 14px;

}

.install-os-title {

  font-size: 14px;

  margin-bottom: 8px;

  color: #00f2fe;

}

.install-steps {

  margin: 0;

  padding-left: 18px;

  font-size: 13px;

  line-height: 1.6;

  color: #e2e8f0;

}

.install-steps li {

  margin-bottom: 4px;

}


/* ==========================================
   SICHERHEITSHINWEIS IM BOTTOM-SHEET
   ========================================== */

.safety-notice {

  font-size: 12px;

  line-height: 1.5;

  padding: 8px 12px;

  border-radius: 8px;

  margin-bottom: 12px;

}

/* Bäder (Freibad/Hallenbad): dezenter Hinweis */
.safety-notice-mild {

  background: rgba(0, 242, 254, 0.08);

  border: 1px solid rgba(0, 242, 254, 0.25);

  color: #cbd5e1;

}

/* See/Klippe: deutlicher Alert-Hinweis */
.safety-notice-alert {

  background: rgba(239, 68, 68, 0.12);

  border: 1px solid rgba(239, 68, 68, 0.5);

  color: #fecaca;

  font-weight: 600;

  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);

}


.btn-submit-spot {

  width: 100%;

  height: 46px;

  border: none;

  border-radius: 12px;

  background: linear-gradient(135deg, #00f2fe, #ff007f);

  color: #fff;

  font-family: 'Sedgwick Ave', cursive;

  font-size: 16px;

  cursor: pointer;

  box-shadow: 0 4px 15px rgba(0, 242, 254, 0.4);

  transition: transform 0.1s, opacity 0.2s;

}


.btn-submit-spot:active {

  transform: scale(0.98);

}


.btn-submit-spot:disabled {

  opacity: 0.6;

  cursor: not-allowed;

  filter: grayscale(0.5);

}


/* ==========================================

   BOTTOM SHEET (Detail Panel)

   ========================================== */

.bottom-sheet {

  position: absolute;

  bottom: 0;

  /* translateY statt fester Pixelwert: verdeckt das Panel zuverlässig,
     egal wie hoch der Inhalt ist (vorher blieb es bei langem Inhalt hängen) */
  transform: translateY(110%);

  left: 0;

  right: 0;

  z-index: 1000;

  background: #0f172a;

  border-top-left-radius: 20px;

  border-top-right-radius: 20px;

  padding: 20px;

  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);

  visibility: hidden;

  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  pointer-events: auto;

}


.bottom-sheet.active {

  transform: translateY(0);

  visibility: visible;

}

/* iOS: Inhalt nicht unter den Home-Indicator laufen lassen */
.bottom-sheet {

  padding-bottom: calc(20px + env(safe-area-inset-bottom));

  max-height: 85vh;

  max-height: 85dvh;

  overflow-y: auto;

}


.btn-close-sheet {

  position: absolute;

  top: 14px;

  right: 14px;

  width: 32px;

  height: 32px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.12);

  color: #94a3b8;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

}


.sheet-content h2 {

  font-size: 1.25rem;

  margin-bottom: 4px;

  padding-right: 36px;

}


.sheet-content p {

  color: #94a3b8;

  font-size: 0.9rem;

  margin-bottom: 6px;

}


.facilities-list {

  display: flex;

  flex-wrap: wrap;

  gap: 4px;

  margin-bottom: 12px;

}


.facility-chip {

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 6px;

  font-size: 10px;

  padding: 2px 6px;

  color: #cbd5e1;

}


.badge { 

  display: inline-block; 

  padding: 4px 10px; 

  border-radius: 6px; 

  font-size: 11px; 

  font-weight: 600;

  margin-bottom: 16px; 

}


.badge.verified {

  background: rgba(0, 242, 254, 0.15);

  color: #00f2fe;

  border: 1px solid rgba(0, 242, 254, 0.3);

}


.badge.community {

  background: rgba(255, 183, 3, 0.15);

  color: #ffb703;

  border: 1px solid rgba(255, 183, 3, 0.3);

}


.btn-nav { 

  display: block; 

  text-align: center; 

  padding: 12px; 

  background: linear-gradient(135deg, #00f2fe, #4facfe); 

  color: #0b1120; 

  font-weight: 700; 

  text-decoration: none; 

  border-radius: 12px; 

}


/* ÄNDERUNG MELDEN BUTTON IN DER BOTTOM SHEET */

.btn-report-spot {

  display: block;

  width: 100%;

  text-align: center;

  margin-top: 8px;

  background: transparent;

  border: 1px dashed rgba(255, 255, 255, 0.2);

  color: #94a3b8;

  padding: 8px 12px;

  border-radius: 10px;

  font-size: 12px;

  font-weight: 500;

  cursor: pointer;

  transition: all 0.2s;

}


.btn-report-spot:hover {

  border-color: #ff007f;

  color: #ff007f;

  background: rgba(255, 0, 127, 0.05);

}


/* ==========================================

   FOOTER LINKS (Impressum / Datenschutz)

   ========================================== */

.legal-footer {

  position: absolute;

  bottom: 8px;

  right: 12px;

  z-index: 1000;

  display: flex;

  gap: 10px;

  font-size: 10px;

}


.legal-link {

  color: rgba(255, 255, 255, 0.4);

  text-decoration: none;

  transition: color 0.2s;

}


.legal-link:hover {

  color: #00f2fe;

} 


/* ==========================================
   UX-OPTIMIERUNG: Kompakte Suche + Filter-Drawer
   ========================================== */

/* Umschalt-Button für den Filterbereich */
.filter-toggle-btn {

  width: 100%;

  min-height: 44px;                 /* Apple/Google Touch-Ziel-Minimum */

  margin-top: 8px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  padding: 10px 12px;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.14);

  border-radius: 10px;

  color: #e2e8f0;

  font-size: 13px;

  font-weight: 600;

  font-family: inherit;

  cursor: pointer;

  transition: background 0.2s, border-color 0.2s;

}

.filter-toggle-btn:hover,
.filter-toggle-btn:focus-visible {

  background: rgba(0, 242, 254, 0.10);

  border-color: rgba(0, 242, 254, 0.45);

  outline: none;

}

.filter-toggle-label {

  display: inline-flex;

  align-items: center;

  gap: 8px;

}

.filter-toggle-right {

  display: inline-flex;

  align-items: center;

  gap: 8px;

}

/* Zähler zeigt, dass im eingeklappten Zustand Filter aktiv sind */
.filter-count-badge {

  min-width: 20px;

  height: 20px;

  padding: 0 6px;

  border-radius: 10px;

  background: #00f2fe;

  color: #0b1120;

  font-size: 11px;

  font-weight: 800;

  display: inline-flex;

  align-items: center;

  justify-content: center;

}

.filter-count-badge[hidden] { display: none; }

.filter-chevron {

  transition: transform 0.25s ease;

  opacity: 0.7;

}

.filter-toggle-btn[aria-expanded="true"] .filter-chevron {

  transform: rotate(180deg);

}

/* Der ausklappbare Bereich */
.filter-drawer {

  margin-top: 8px;

  padding-top: 10px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  display: flex;

  flex-direction: column;

  gap: 8px;

  max-height: 55vh;

  max-height: 55dvh;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  overscroll-behavior: contain;

  animation: drawerIn 0.22s ease;

}

.filter-drawer[hidden] { display: none; }

@keyframes drawerIn {

  from { opacity: 0; transform: translateY(-6px); }

  to   { opacity: 1; transform: translateY(0); }

}

/* Schalter im Drawer bekommen echte Touch-Höhe */
.drawer-toggle {

  min-height: 44px;

  padding: 4px 2px;

}

/* Rechtliche Links unten im Drawer */
.filter-drawer .legal-links {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  padding-top: 8px;

  margin-top: 2px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  font-size: 11px;

}

.filter-drawer .legal-links a {

  color: rgba(255, 255, 255, 0.65);

  text-decoration: none;

  padding: 6px 0;

}

.filter-drawer .legal-links a:first-child {

  color: #00f2fe;

  font-weight: 600;

}

/* Suchfeld & Buttons: verlässliche Touch-Größe, kein iOS-Auto-Zoom */
.search-row input[type="text"] {

  min-height: 44px;

  font-size: 16px;   /* < 16px löst auf iOS automatisches Zoomen aus */

}

.btn-search-glow {

  min-width: 44px;

  min-height: 44px;

}

.glass-select {

  min-height: 42px;

  font-size: 15px;

}

/* Sehr kleine Geräte: Panel darf nie den halben Bildschirm fressen */
@media (max-height: 700px) {

  .filter-drawer {

    max-height: 42vh;

    max-height: 42dvh;

  }

}

/* Nutzer, die Animationen reduziert haben wollen, respektieren */
@media (prefers-reduced-motion: reduce) {

  .filter-drawer { animation: none; }

  .filter-chevron { transition: none; }

}


/* ==========================================
   INTELLIGENTE SUCHE: Vorschlagsliste
   ========================================== */

.search-autocomplete {

  position: relative;

}

.search-suggestions {

  position: absolute;

  top: calc(100% + 6px);

  left: 0;

  right: 0;

  z-index: 1200;

  margin: 0;

  padding: 4px;

  list-style: none;

  background: rgba(15, 23, 42, 0.98);

  -webkit-backdrop-filter: blur(16px);

  backdrop-filter: blur(16px);

  border: 1px solid rgba(0, 242, 254, 0.35);

  border-radius: 12px;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);

  max-height: 44vh;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  overscroll-behavior: contain;

}

.search-suggestions[hidden] { display: none; }

.suggestion-item {

  display: flex;

  align-items: center;

  gap: 10px;

  min-height: 46px;

  padding: 8px 10px;

  border-radius: 8px;

  cursor: pointer;

  color: #e2e8f0;

}

.suggestion-item:hover,
.suggestion-item.is-active {

  background: rgba(0, 242, 254, 0.14);

}

.suggestion-main {

  display: flex;

  flex-direction: column;

  min-width: 0;

  flex: 1;

}

.suggestion-name {

  font-size: 14px;

  font-weight: 600;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.suggestion-meta {

  font-size: 11px;

  opacity: 0.6;

}

.suggestion-height {

  flex: 0 0 auto;

  font-size: 11px;

  font-weight: 800;

  padding: 3px 7px;

  border-radius: 6px;

  background: rgba(0, 242, 254, 0.15);

  color: #00f2fe;

}

.suggestion-height.is-unknown {

  background: rgba(148, 163, 184, 0.18);

  color: #cbd5e1;

}

.suggestion-hint {

  padding: 10px;

  font-size: 12px;

  opacity: 0.65;

  text-align: center;

}



/* Installations-Anleitung: Zusatz-Elemente */
.install-note {

  font-size: 12px;

  line-height: 1.5;

  opacity: 0.75;

  margin-top: 8px;

  padding: 8px 10px;

  background: rgba(255, 183, 3, 0.08);

  border: 1px solid rgba(255, 183, 3, 0.25);

  border-radius: 8px;

}

.install-os-block[hidden] { display: none; }

.install-showall-btn {

  width: 100%;

  min-height: 40px;

  margin-top: 4px;

  background: transparent;

  border: 1px dashed rgba(255, 255, 255, 0.25);

  color: rgba(255, 255, 255, 0.65);

  border-radius: 8px;

  font-size: 12px;

  font-family: inherit;

  cursor: pointer;

}

.install-showall-btn[hidden] { display: none; }


/* Hilfetexte unter Formularfeldern */
.field-hint {

  display: block;

  margin-top: 5px;

  font-size: 11px;

  line-height: 1.4;

  color: rgba(255, 255, 255, 0.5);

}

/* Sicherheits-Fakten im Detail-Panel */
.spot-facts {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-bottom: 10px;

}

.spot-facts[hidden] { display: none; }

.spot-fact {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  padding: 5px 10px;

  border-radius: 999px;

  font-size: 11.5px;

  font-weight: 600;

  background: rgba(255, 255, 255, 0.07);

  border: 1px solid rgba(255, 255, 255, 0.14);

  color: #e2e8f0;

}

.spot-fact.is-good {

  background: rgba(16, 185, 129, 0.14);

  border-color: rgba(16, 185, 129, 0.45);

  color: #6ee7b7;

}

.spot-fact.is-warn {

  background: rgba(245, 158, 11, 0.14);

  border-color: rgba(245, 158, 11, 0.45);

  color: #fcd34d;

}

.spot-fact.is-danger {

  background: rgba(239, 68, 68, 0.16);

  border-color: rgba(239, 68, 68, 0.5);

  color: #fca5a5;

}


/* Zweitrangiger Aktions-Button im Detail-Panel.
   Vorher war er so dunkel, dass die Beschriftung kaum lesbar war. */
.btn-nav-secondary {

  margin-top: 8px;

  background: rgba(255, 255, 255, 0.10) !important;

  border: 1.5px solid rgba(0, 242, 254, 0.55);

  color: #7fe9ff !important;

  font-weight: 700;

}

.btn-nav-secondary:hover,
.btn-nav-secondary:active {

  background: rgba(0, 242, 254, 0.18) !important;

  color: #ffffff !important;

}


/* ==========================================
   DESKTOP-SKALIERUNG DES CTA-BANNERS
   ========================================== */
/* Basis für die relativen Buchstabengrößen des Graffiti-Schriftzugs */
.arcade-title {

  font-size: 16px;

}

/* Ab Tablet spürbar größer */
@media (min-width: 700px) {

  .arcade-cta-card {

    max-width: 560px;

    padding: 14px 20px;

    gap: 14px;

  }

  .arcade-title { font-size: 19px; }

  .arcade-sub { font-size: 12.5px; }

  .arcade-btn-glow {

    font-size: 14px;

    padding: 11px 18px;

  }
}

/* Große Monitore: noch einmal deutlich größer, ohne aufdringlich zu werden */
@media (min-width: 1200px) {

  .arcade-cta-card {

    max-width: 660px;

    padding: 18px 26px;

    bottom: 32px;

  }

  .arcade-title { font-size: 23px; }

  .arcade-sub { font-size: 14px; }

  .arcade-btn-glow {

    font-size: 16px;

    padding: 13px 24px;

    letter-spacing: 0.8px;

  }
}

/* Sehr große / hochauflösende Bildschirme */
@media (min-width: 1800px) {

  .arcade-cta-card { max-width: 760px; }

  .arcade-title { font-size: 27px; }

  .arcade-sub { font-size: 15.5px; }

  .arcade-btn-glow { font-size: 18px; }
}