/* Retter-Portal v1.3.60
   Mobile Kalendersteuerung und Wasserquellen-Detailansicht sauber stabilisiert. */

/* Hydrantenkarte: mobile Detailkarte als robuste Kartenebene statt abgeschnittenem Leaflet-Popup. */
html body .water-map{
  isolation:isolate;
}
html body .water-mobile-sheet{
  position:absolute;
  z-index:1200;
  left:12px;
  right:12px;
  bottom:12px;
  display:grid;
  max-height:min(68%,460px);
  overflow:auto;
  padding:18px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:22px;
  background:linear-gradient(155deg,rgba(10,24,42,.985),rgba(6,17,30,.98));
  color:#f8fafc;
  box-shadow:0 24px 70px rgba(2,6,23,.48),inset 0 1px 0 rgba(255,255,255,.05);
  transform:translateY(calc(100% + 28px));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:transform .22s ease,opacity .18s ease,visibility .18s ease;
  -webkit-overflow-scrolling:touch;
}
html body .water-mobile-sheet.is-open{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
html body .water-mobile-sheet__close{
  position:absolute;
  z-index:2;
  top:10px;
  right:10px;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;
  background:rgba(30,41,59,.92);
  color:#fff;
  font-size:1.25rem;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}
html body .water-mobile-sheet .water-popup{
  padding-right:38px;
  overflow:visible!important;
}
html body .water-mobile-sheet .water-popup-title{color:#fff!important}
html body .water-mobile-sheet .water-popup-meta{color:#cbd5e1!important}
html body .water-mobile-sheet .water-popup-location{color:#f1f5f9!important}
html body .water-mobile-sheet .water-popup-facts span{
  background:rgba(30,41,59,.92)!important;
  border-color:rgba(148,163,184,.18)!important;
  color:#f8fafc!important;
}
html body .water-mobile-sheet .water-popup-facts b{color:#aebbd0!important}
html body .water-mobile-sheet .map-popup-links .btn{
  background:#243244!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.10)!important;
}
body[data-theme="light"] .water-mobile-sheet{
  background:linear-gradient(155deg,#ffffff,#f3f7fb);
  color:#0f172a;
  border-color:rgba(148,163,184,.30);
  box-shadow:0 24px 64px rgba(71,85,105,.25),inset 0 1px 0 rgba(255,255,255,.8);
}
body[data-theme="light"] .water-mobile-sheet__close{
  background:#eef3f8;
  color:#0f172a;
  border-color:rgba(148,163,184,.28);
}
body[data-theme="light"] .water-mobile-sheet .water-popup-title{color:#0f172a!important}
body[data-theme="light"] .water-mobile-sheet .water-popup-meta{color:#475569!important}
body[data-theme="light"] .water-mobile-sheet .water-popup-location{color:#1e293b!important}
body[data-theme="light"] .water-mobile-sheet .water-popup-facts span{
  background:#f1f5f9!important;
  border-color:#d9e2ec!important;
  color:#0f172a!important;
}
body[data-theme="light"] .water-mobile-sheet .water-popup-facts b{color:#64748b!important}
body[data-theme="light"] .water-mobile-sheet .map-popup-links .btn{
  background:#e8eef6!important;
  color:#0f172a!important;
  border-color:rgba(148,163,184,.28)!important;
}

@media(max-width:760px){
  /* Kalender-Toolbar auf Smartphones: kein gequetschter Zeitraum mehr. */
  html body .calendar-toolbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
    padding:14px!important;
  }
  html body .calendar-month-nav{
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr) 48px!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
  }
  html body .calendar-month-nav>.btn{
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    height:48px!important;
    min-height:48px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:15px!important;
    font-size:1.35rem!important;
  }
  html body .calendar-current-month{
    min-width:0!important;
    width:100%!important;
    padding:8px 10px!important;
    display:grid!important;
    justify-items:center!important;
    gap:4px!important;
    text-align:center!important;
    border:1px solid var(--line-soft)!important;
    border-radius:16px!important;
    background:rgba(148,163,184,.07)!important;
  }
  html body .calendar-current-month .eyebrow{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    margin:0!important;
    font-size:.66rem!important;
    line-height:1.2!important;
    letter-spacing:.09em!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    text-align:center!important;
  }
  html body .calendar-current-month strong{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    font-size:1.28rem!important;
    line-height:1.15!important;
    letter-spacing:-.035em!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    text-align:center!important;
  }
  html body .calendar-month-form{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:10px!important;
    align-items:end!important;
    width:100%!important;
  }
  html body .calendar-month-form label{
    min-width:0!important;
    width:100%!important;
  }
  html body .calendar-month-form input[type="month"]{
    width:100%!important;
    min-width:0!important;
  }
  html body .calendar-month-form .btn{
    width:auto!important;
    min-width:116px!important;
    white-space:nowrap!important;
  }
  html body .calendar-legend{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    justify-content:stretch!important;
    gap:10px!important;
    width:100%!important;
    padding-top:2px!important;
  }
  html body .calendar-legend>span{
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
    line-height:1.3!important;
  }
  html body .calendar-legend>span:last-child{
    grid-column:1/-1!important;
  }

  html body .water-mobile-sheet .water-popup{
    gap:9px!important;
  }
  html body .water-mobile-sheet .water-popup-facts{
    grid-template-columns:1fr 1fr!important;
  }
  html body .water-mobile-sheet .map-popup-links{
    grid-template-columns:1fr 1fr!important;
  }
}

@media(max-width:430px){
  html body .calendar-month-form{
    grid-template-columns:minmax(0,1fr)!important;
  }
  html body .calendar-month-form .btn{
    width:100%!important;
    min-width:0!important;
  }
  html body .calendar-legend{
    grid-template-columns:minmax(0,1fr)!important;
  }
  html body .calendar-legend>span:last-child{
    grid-column:auto!important;
  }
  html body .water-mobile-sheet{
    left:9px;
    right:9px;
    bottom:9px;
    max-height:74%;
    padding:16px;
    border-radius:20px;
  }
  html body .water-mobile-sheet .water-popup{
    padding-right:32px;
  }
  html body .water-mobile-sheet .water-popup-facts,
  html body .water-mobile-sheet .map-popup-links{
    grid-template-columns:minmax(0,1fr)!important;
  }
}