/*LEGENDE*/

/* Leaflet divIcon Container soll nichts "wegclippen" */
.hz-marker--fa{
  background: none !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
}

/* Altes CSS-System ausknipsen */
.hz-marker::before{
  content: none !important;
  background: none !important;
}

/* Font Awesome selbst */
.hz-marker--fa i{
  display: inline-block;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
}

/* Farben + Größen pro Typ */
.hz-marker--village i{ color:#2a9d8f; font-size:18px; }
.hz-marker--town i{ color:#457b9d; font-size:20px; }
.hz-marker--capital i{ color:#f4a261; font-size:22px; }
.hz-marker--important i{ color:#d62828; font-size:26px; }

.hz-marker--important {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hz-marker--important i {
  font-size: 28px;
  color: #d62828;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
}

/* Altes ::before Icon-System komplett deaktivieren */
.hz-marker::before {
  content: none !important;
  background: none !important;
}

/* Font Awesome Marker Layout */
.hz-marker--fa {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none !important;
  border: none;
}

.hz-popup__residents{
margin-bottom: 10px;
  line-height: 1.2rem;
  border-top: 1px solid var(--line1);
  padding-top: 10px;
  font-size: 10px;
  text-transform: uppercase;
}
.hz-popup__residents a{
  text-decoration: none;
}
.hz-popup__residents a:hover{
  text-decoration: underline;
}

/* Container: exakt 958×958 */
.hz-wrap { max-width: 958px; margin: 0 auto;}

.hz-sub {
padding: 10px;
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
}

.hz-map{
  position: relative;
  width: 958px;
  height: 958px;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden; /* hält Marker/Popup innerhalb, sieht sauber aus */
  background: transparent;
}

/* Bild: exakt passen */
.hz-map__img{
  display:block;
  width: 958px;
  height: 958px;
  user-select: none;
  -webkit-user-drag: none;
}

/* Marker-Layer */
.hz-map__markers{
  position:absolute;
  inset:0;
  pointer-events:auto;
}





/* Popup */
.hz-popup{
  position:absolute;
  width: 320px;
  z-index: 50;
}
.hz-popup__inner{
background: var(--paper);
  padding: 10px;
}
.hz-popup__title{ 
font-family: var(--mainfont);
  color: var(--golden);
  text-transform: uppercase;
  font-size: 20px;
  border-bottom: 1px solid var(--line1);
  margin-bottom: 5px;
}

.hz-popup__meta{ 
font-size: 10px;
  opacity: .8;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hz-popup__desc{ 
white-space: pre-wrap;
  font-size: 12px;
  line-height: 170%;
  margin-bottom: 10px;
  text-align: justify;
}
.hz-popup__actions{ display: grid; gap: 8px; }
.hz-admin-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* Modal */
.hz-modal { position: fixed; inset: 0; z-index: 99998; }
.hz-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
}
.hz-modal__panel {
position: relative;
  width: min(520px, calc(100% - 22px));
  margin: 7vh auto 0 auto;
  background: var(--paper);
  overflow: hidden;
}
.hz-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.hz-modal__title {
  font-weight: 700;
  font-size: 1.05rem;
}

.hz-form { padding: 12px; }
.hz-label { display: block; margin-bottom: 10px; }
.hz-label > span { 
display: block;
  margin-bottom: 6px;
  font-weight: 600;
  opacity: .9;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1px;
}

.hz-input {
width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line1);
  padding: 10px 10px;
  outline: none;
  background: var(--paper);
  color: var(--fontcolor);
  font-size: 12px;
}
.hz-input:focus {
  border-color: rgba(0,0,0,.35);
}

.hz-help {
  font-size: .85rem;
  opacity: .75;
  margin-top: 4px;
}

.hz-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.hz-btn {
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}
.hz-btn--primary {
  background: #1f6feb;
  border-color: #1f6feb;
  color: #fff;
}
.hz-btn--danger {
  background: #e53e3e;
  border-color: #e53e3e;
  color: #fff;
}
.hz-btn--ghost {
  background: #fff;
}

.hz-admin-hint {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(31,111,235,.08);
  border: 1px solid rgba(31,111,235,.25);
  font-size: .9rem;
}

/* --- Marker müssen von global.css Button-Styles befreit werden --- */
#hz-map .hz-marker{
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -100%); /* Spitze/Unterkante auf Koordinate */
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: 0 !important;
  font-size: 0 !important;
  text-transform: none !important;
  cursor: pointer;
  z-index: 20;
}

/* Altes ::before Icon-System deaktivieren (bei dir schon drin – hier zur Sicherheit) */
#hz-map .hz-marker::before{
  content: none !important;
  background: none !important;
}

/* Font Awesome Icon selbst sichtbar machen */
#hz-map .hz-marker i{
  display: inline-block !important;
  line-height: 1 !important;
  font-size: var(--hz-fa-size, 20px) !important;
  color: var(--hz-fa-color, #fff) !important;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
}

/* Optional: Klickfläche etwas größer, ohne das Icon zu verzerren */
#hz-map .hz-marker{
  pointer-events: auto;
}