/* 7.15.14 — windrichting + apparaatkompas */
@media(max-width:1024px){
  .ms71512-wind-card{
    position:relative!important;
    padding:0!important;
    overflow:hidden;
    display:block!important;
    height:128px!important;
  }
  .ms71512-wind-open{
    width:100%!important;
    height:100%!important;
    display:grid!important;
    grid-template-columns:100px minmax(0,1fr) 34px!important;
    align-items:center!important;
    text-align:left!important;
    padding:10px 18px!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:inherit!important;
  }
  .ms71512-wind-compass{
    display:grid;
    place-items:center;
  }
  .ms71512-compass-ring{
    width:70px;
    height:70px;
    border:3px solid #d5e5ef;
    border-radius:50%;
    position:relative;
    box-sizing:border-box;
    box-shadow:inset 0 0 16px rgba(46,145,218,.13);
  }
  .ms71512-compass-ring:before,
  .ms71512-compass-ring:after{
    content:"";
    position:absolute;
    background:rgba(213,229,239,.35);
  }
  .ms71512-compass-ring:before{
    left:50%;top:8px;bottom:8px;width:1px;
  }
  .ms71512-compass-ring:after{
    top:50%;left:8px;right:8px;height:1px;
  }
  .ms71512-compass-ring span{
    position:absolute;
    left:50%;
    top:-16px;
    transform:translateX(-50%);
    font-size:10px;
    font-weight:900;
    color:#dceaf3;
  }
  #ms71512WindArrow{
    position:absolute;
    z-index:2;
    left:50%;
    top:50%;
    width:4px;
    height:27px;
    border-radius:4px 4px 1px 1px;
    background:linear-gradient(to bottom,#2795ff 0 65%,#dfeaf2 65%);
    transform-origin:50% 100%;
    transform:translate(-50%,-100%) rotate(0deg);
    transition:transform .15s linear;
    box-shadow:0 0 10px rgba(39,149,255,.6);
  }
  #ms71512WindArrow:after{
    content:"";
    position:absolute;
    top:-6px;
    left:50%;
    transform:translateX(-50%);
    width:0;height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:9px solid #2795ff;
  }
  .ms71512-wind-card .ms71510-value>span{
    display:flex!important;
    gap:3px;
    align-items:center;
  }
  .ms71512-wind-card .ms71510-value>span b{
    font:inherit;
    color:inherit;
  }
  #ms71512WindDirection{
    color:#77c2ff!important;
    font-weight:800!important;
  }
  .ms71512-compass-permission{
    position:absolute!important;
    z-index:5!important;
    right:50px!important;
    bottom:8px!important;
    width:auto!important;
    height:30px!important;
    min-height:30px!important;
    margin:0!important;
    padding:4px 9px!important;
    border:1px solid rgba(89,183,242,.36)!important;
    border-radius:10px!important;
    background:rgba(20,71,98,.86)!important;
    color:#bfeaff!important;
    font-size:10px!important;
    font-weight:800!important;
    line-height:1!important;
  }
  .ms71512-compass-permission.active{
    color:#77e795!important;
    border-color:rgba(80,218,126,.35)!important;
    background:rgba(16,68,47,.72)!important;
  }
  .ms71512-compass-permission.hidden{
    display:none!important;
  }
}
@media(max-width:620px){
  .ms71512-wind-card{height:118px!important}
  .ms71512-wind-open{
    grid-template-columns:86px minmax(0,1fr) 28px!important;
    padding:8px 14px!important;
  }
  .ms71512-compass-ring{width:62px;height:62px}
  #ms71512WindArrow{height:23px}
  .ms71512-compass-permission{
    right:40px!important;
    bottom:6px!important;
  }
}

/* 7.15.15 — Rijkswaterstaat watertemperatuur */
.ms71515-rws-water-panel{
  margin:18px 0 20px;
  padding:18px;
  border:1px solid rgba(61,190,226,.34);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(12,63,76,.96),rgba(8,38,50,.98));
  box-shadow:0 18px 42px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.04);
  scroll-margin-top:88px;
  overflow:hidden;
}
.ms71515-rws-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.ms71515-rws-head>div{
  min-width:0;
  display:grid;
  gap:5px;
}
.ms71515-rws-head span{
  color:#93b7c4;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}
.ms71515-rws-head strong{
  color:#dff8ff;
  font-size:32px;
  line-height:1.05;
}
.ms71515-rws-head small{
  color:#a7c0ca;
  font-size:15px;
  line-height:1.35;
}
#ms71515RwsRefresh{
  flex:0 0 auto;
  width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  margin:0;
  border:1px solid rgba(88,202,235,.32);
  border-radius:15px;
  background:rgba(22,105,128,.35);
  color:#bdefff;
  font-size:23px;
  font-weight:900;
}
.ms71515-rws-water-map{
  width:100%;
  height:280px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(114,210,237,.2);
  background:#09232d;
}
.ms71515-rws-water-map .leaflet-control-attribution{
  font-size:9px;
}
.ms71515-rws-detail{
  display:grid;
  grid-template-columns:1.4fr .8fr 1fr;
  gap:10px;
  margin-top:12px;
}
.ms71515-rws-detail>div{
  min-width:0;
  padding:12px 13px;
  border:1px solid rgba(112,198,222,.16);
  border-radius:16px;
  background:rgba(255,255,255,.035);
  display:grid;
  gap:4px;
}
.ms71515-rws-detail small{
  color:#7fa9b7;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}
.ms71515-rws-detail strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#eafaff;
  font-size:14px;
  line-height:1.25;
}
#ms71515RwsWaterNote{
  margin:12px 2px 0;
  color:#88aab6;
  font-size:12px;
  line-height:1.45;
}
@media(max-width:620px){
  .ms71515-rws-water-panel{
    margin:14px 0 18px;
    padding:14px;
    border-radius:22px;
  }
  .ms71515-rws-head strong{font-size:28px}
  .ms71515-rws-head small{font-size:13px}
  .ms71515-rws-water-map{height:235px}
  .ms71515-rws-detail{
    grid-template-columns:1fr 1fr;
  }
  .ms71515-rws-detail>div:first-child{
    grid-column:1/-1;
  }
}

/* 7.15.23 — gekozen eerste startscherm: Serenity centraal en windvanger duidelijk actief */
@media(max-width:1400px){
  .ms71514-hero{
    min-height:220px!important;
    height:clamp(220px,32vw,390px)!important;
    background:#061827!important;
  }
  .ms71514-hero img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    background:#061827!important;
  }
  .ms71512-compass-ring{
    box-shadow:inset 0 0 18px rgba(39,149,255,.2),0 0 14px rgba(39,149,255,.22)!important;
  }
  .ms71512-compass-ring span{
    color:#fff!important;
    text-shadow:0 0 6px rgba(39,149,255,.8);
  }
  #ms71512WindArrow{
    background:linear-gradient(to bottom,#45b7ff 0 62%,#eaf6ff 62%)!important;
    box-shadow:0 0 12px rgba(39,149,255,.85)!important;
  }
  #ms71512WindDirection:before{
    content:'WIND UIT ';
    color:#91a9b8;
    font-size:.78em;
    font-weight:800;
    letter-spacing:.04em;
  }
}
@media(max-width:620px){
  .ms71514-hero{min-height:190px!important;height:clamp(190px,54vw,245px)!important}
}