.experience{--footer-safe-bottom:env(safe-area-inset-bottom,0px)}

/* Keep both navigation groups in normal layout while zoomed in. */
.experience:is([data-mode=spielen],[data-mode=malen],[data-mode=entdecken],[data-mode=details]) .service-band{
 display:grid;
 grid-template-columns:minmax(0,1fr) auto;
 align-items:center;
 gap:16px;
 padding:8px max(16px,env(safe-area-inset-right)) calc(8px + var(--footer-safe-bottom)) max(16px,env(safe-area-inset-left));
}
.experience:is([data-mode=spielen],[data-mode=malen],[data-mode=entdecken],[data-mode=details]) .offers{display:none}
.experience:is([data-mode=spielen],[data-mode=malen],[data-mode=entdecken],[data-mode=details]) .detail-contact{
 position:static;
 inset:auto;
 grid-column:2;
 grid-row:1;
 justify-content:flex-end;
 flex-wrap:nowrap;
 gap:8px;
}
.experience:is([data-mode=spielen],[data-mode=malen],[data-mode=entdecken],[data-mode=details]) .detail-contact .action{
 min-height:44px;
 padding:6px 12px;
 font-size:12px;
 white-space:nowrap;
}
.experience:is([data-mode=spielen],[data-mode=malen],[data-mode=entdecken],[data-mode=details]) .legal-links{
 position:static;
 inset:auto;
 grid-column:1;
 grid-row:1;
 align-items:center;
 justify-self:start;
 gap:8px;
 margin:0;
 font-size:11px;
 line-height:1.2;
 white-space:nowrap;
}
.experience:is([data-mode=spielen],[data-mode=malen],[data-mode=entdecken],[data-mode=details]) .legal-links a{
 display:inline-flex;
 align-items:center;
 min-height:44px;
 padding:0 3px;
}
@media(max-width:559px){
 .experience:is([data-mode=spielen],[data-mode=malen],[data-mode=entdecken],[data-mode=details]) .service-band{
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:44px 44px;
  justify-items:center;
  gap:2px;
  padding-top:6px;
  padding-bottom:calc(6px + var(--footer-safe-bottom));
 }
 .experience:is([data-mode=spielen],[data-mode=malen],[data-mode=entdecken],[data-mode=details]) .detail-contact{
  grid-column:1;
  justify-content:center;
  gap:6px;
 }
 .experience:is([data-mode=spielen],[data-mode=malen],[data-mode=entdecken],[data-mode=details]) .detail-contact .action{
  padding:6px 10px;
  font-size:11px;
 }
 .experience:is([data-mode=spielen],[data-mode=malen],[data-mode=entdecken],[data-mode=details]) .legal-links{
  grid-row:2;
  justify-self:center;
 }
}