/* Share and authenticated site actions. */
.site-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:100%}
.site-share button{display:inline-flex;align-items:center;gap:6px}
.site-share input{width:100%;min-width:0}
.route-actions{align-items:center;gap:8px;flex-wrap:wrap}
.route-actions .route-icon-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:48px;min-width:48px;min-height:48px;padding:0;gap:0}
.route-actions .site-share{flex:0 1 auto;min-width:0}
.route-actions .site-share>span{max-width:240px;font-size:12px}
.route-actions .site-share label{flex-basis:100%;max-width:100%}
.route-actions .route-icon-button svg{width:20px;height:20px;flex-shrink:0}

/* Override the existing .site-info-row span display rule. */
.site-info-row .site-attribute-list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.site-info-row .site-attribute-list .site-attribute-icon{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:48px;padding:0;border:0;border-radius:13px;background:var(--dark);color:#fff;line-height:1;position:relative}
.site-info-row .site-attribute-icon svg{display:block;flex:none;width:20px;height:20px;margin:0}
.site-info-row .site-attribute-icon:focus-visible{outline:2px solid var(--dark);outline-offset:3px}
.site-info-row .site-attribute-icon:hover{background:#0c414e}

/* Update 27: einheitliches Linien-Iconsystem nach dem gelieferten Beispiel. */
.route-actions .detail-icon,
.site-info-row .site-attribute-list .detail-icon {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 2px solid #102b72;
  border-radius: 11px;
  background: #fff;
  color: #102b72;
  box-shadow: none;
  line-height: 1;
  transform: none;
}
.route-actions .detail-icon svg,
.site-info-row .site-attribute-list .detail-icon svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.8;
}
.site-info-row .site-attribute-list .detail-icon-info,
.site-info-row .site-attribute-list .detail-icon-info:hover,
.site-info-row .site-attribute-list .detail-icon-info:focus-visible {
  border-color: #102b72;
  background: #fff;
  color: #102b72;
  cursor: help;
  transform: none;
}
.route-actions .detail-icon-action {
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.route-actions .detail-icon-action:hover,
.route-actions .detail-icon-action:focus-visible {
  border-color: #176c9c;
  background: #176c9c;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(23,108,156,.18);
  outline: 0;
  transform: none;
}

/* Update 34: Angebote einer Füllstation. */
.site-info-row.fill-services-row .fill-service-icons{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;margin-top:0}
.site-info-row.fill-services-row .fill-service-icons .fill-service-icon:nth-child(-n+3)::after{right:auto;left:0}
.site-info-row.fill-services-row .fill-service-icons .fill-service-icon:nth-child(n+4)::after{right:0;left:auto}
.popup-fill-services .popup-fill-service-icon{position:relative}
.popup-fill-services .popup-fill-service-icon:nth-child(-n+2)::after{right:auto;left:0}
.popup-fill-services .popup-fill-service-icon:nth-child(n+3)::after{right:0;left:auto}
.popup-fill-services .popup-fill-service-icon:focus-visible{outline:2px solid #176c9c;outline-offset:2px}
.site-info-row.fill-services-row .fill-service-icons .fill-service-icon.active,
.site-info-row.fill-services-row .fill-service-icons .fill-service-icon.active:hover,
.site-info-row.fill-services-row .fill-service-icons .fill-service-icon.active:focus-visible{border-color:#102b72;background:#fff;color:#102b72;opacity:1}
.site-info-row.fill-services-row .fill-service-icons .fill-service-icon.inactive,
.site-info-row.fill-services-row .fill-service-icons .fill-service-icon.inactive:hover,
.site-info-row.fill-services-row .fill-service-icons .fill-service-icon.inactive:focus-visible{border-color:#d8e0e4;background:#f5f7f8;color:#8b989e;opacity:.55}
.site-info-row.fill-services-row .fill-service-icons .fill-service-icon svg{width:23px;height:23px}

/* Update 29: kompakter, berührungsfreundlicher Notfallplan. */
.emergency-box{position:relative;flex:1 1 210px;max-width:330px;margin-left:auto}
.site-info-row.emergency-only .emergency-box{width:100%;max-width:none;margin:4px 0 0}
.emergency-trigger{box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:7px 12px;border:1px solid #e0b9b9;border-radius:11px;background:#fff;color:#8e2027;text-align:left;cursor:pointer;transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}
.emergency-trigger svg{flex:0 0 25px;width:25px;height:25px}
.emergency-trigger span{display:flex;min-width:0;flex-direction:column;line-height:1.2}
.emergency-trigger strong{font-size:14px}
.emergency-trigger small{overflow:hidden;color:#53666e;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.emergency-trigger:hover,.emergency-trigger:focus-visible{border-color:#176c9c;background:#176c9c;color:#fff;box-shadow:0 0 0 4px rgba(23,108,156,.18);outline:0}
.emergency-trigger:hover small,.emergency-trigger:focus-visible small{color:rgba(255,255,255,.88)}
.emergency-popover{position:absolute;z-index:80;top:calc(100% + 9px);right:0;width:min(380px,calc(100vw - 36px));padding:16px;border:1px solid #d7e0e3;border-top:4px solid #b4232d;border-radius:13px;background:#fff;color:#102a35;box-shadow:0 16px 42px rgba(5,31,40,.23);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);transition:opacity .16s ease,visibility .16s ease,transform .16s ease}
.emergency-box:hover .emergency-popover,.emergency-box:focus-within .emergency-popover{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.emergency-popover-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:#8e2027;font-size:17px}
.emergency-popover-head span{padding:3px 7px;border-radius:6px;background:#f3f6f7;color:#53666e;font-size:11px;font-weight:700}
.emergency-popover ol{margin:0 0 12px;padding-left:22px;font-size:13px;line-height:1.5}
.emergency-popover li+li{margin-top:3px}
.emergency-popover dl{margin:0;border-top:1px solid #e1e7e9}
.emergency-popover dl>div{display:grid;grid-template-columns:120px 1fr;gap:8px;padding:7px 0;border-bottom:1px solid #e1e7e9;font-size:12px}
.emergency-popover dt{color:#53666e;font-weight:650}
.emergency-popover dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.emergency-popover a{color:#102b72}
.emergency-warning{margin:11px 0 0;padding:9px;border-radius:8px;background:#fff1f1;color:#8e2027;font-size:12px;font-weight:700;line-height:1.35}
@media(max-width:720px){.emergency-box{flex-basis:100%;max-width:none;margin-left:0}.emergency-popover{position:fixed;top:auto;right:12px;bottom:12px;left:12px;width:auto;max-height:calc(100vh - 24px);overflow:auto}.emergency-popover dl>div{grid-template-columns:105px 1fr}}
.detail-icon[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 40;
  right: 0;
  bottom: calc(100% + 9px);
  width: max-content;
  max-width: min(220px, calc(100vw - 32px));
  padding: 7px 9px;
  border: 1px solid rgba(16,43,114,.18);
  border-radius: 8px;
  background: #fff;
  color: #102b72;
  box-shadow: 0 5px 16px rgba(5,31,40,.18);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}
@media(max-width:420px){
  .site-info-row.fill-services-row .fill-service-icons{gap:5px}
  .detail-icon[data-tooltip]::after{max-width:min(190px,calc(100vw - 24px));font-size:11px}
}
.detail-icon[data-tooltip]:hover::after,
.detail-icon[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Update 28: dezenter Grundzustand, blauer Interaktionszustand bleibt erhalten. */
.route-actions .detail-icon,
.site-info-row .site-attribute-list .detail-icon,
.site-info-row .site-attribute-list .detail-icon-info,
.site-info-row .site-attribute-list .detail-icon-info:hover,
.site-info-row .site-attribute-list .detail-icon-info:focus-visible {
  border-width: 1px;
  border-color: #d8e0e4;
}
.route-actions .detail-icon-action:hover,
.route-actions .detail-icon-action:focus-visible {
  border-width: 1px;
  border-color: #176c9c;
}